react redux 4 学习

最新推荐文章于 2022-06-29 10:54:32 发布

杭州大白菜

最新推荐文章于 2022-06-29 10:54:32 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/wellfuture/article/details/76637714

版权

创建一个

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;

注意一下prop-types的引用

模块 props的初始化

以及props的限制。

杭州大白菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react redux 4 学习

创建一个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", "r
复制链接

扫一扫