react redux 4 学习

最新推荐文章于 2024-10-12 07:46:51 发布

原创最新推荐文章于 2024-10-12 07:46:51 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用React创建一个简单的应用程序，包括配置package.json文件、编写组件间的数据传递及状态更新逻辑。通过实例演示了如何利用prop-types进行类型检查，并展示了textarea与组件状态之间的双向绑定。

创建一个

package.json

{
  "name": "003study",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

注意这里多了一个prop-types.

在public 下有一个index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src放了三个js文件

import React from 'react';
import ReactDOM from 'react-dom';
import Seditor from './Seditor';

ReactDOM.render(
    <Seditor/>,
    document.getElementById('root')
);

注意 import Seditor from './Seditor'; 表示引入模块

import  React ,{Component} from  'react';
import ReactDOM from 'react-dom';
import Dis from './Dis';
class  Seditor extends  Component {
    constructor(props){
       super(props);
       console.log("Seditor:constructor");
       this.state ={
           textvalue:"请输入内容......",
           fresh:false
       }
    }
    changTextvalue=()=> {
        let values = ReactDOM.findDOMNode(this.refs.value1).value;
        this.setState({textvalue: values});

    }

    componentDidMount() {
        console.log("Seditor:componentDidMount");
    }

    componentWillUnmount() {
        console.log("Seditor:componentWillUnmount");
    }

    render(){
        console.log("Seditor:render");
        return (
            <div><h1>输入</h1>
            <textarea style={{width:300,height:150}}
                      defaultValue={this.state.textvalue}
                      ref="value1"
                      onChange={()=>this.changTextvalue()}/>
                <h1>输出</h1>
              <Dis content={this.state.textvalue} />
            </div>
        )
    }
}


export  default  Seditor;

export default Seditor 表示可以导入被别的代码import

import  React ,{Component} from  'react';
import PropTypes from 'prop-types';
class Dis extends  Component{
    static get defaultProps(){
        return {
            content:"请输入内容.."
        }
    }
    static PropTypes  ={
        content:PropTypes.string.isRequired
    }
    render(){
        return (
            <p>{this.props.content}</p>
        )
    }
}
export default  Dis;