react redux 4 学习

来源：互联网发布：淘宝店铺的图片尺寸编辑：程序博客网时间：2024/06/06 11:45

创建一个

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