import React from 'react'; import '../css/demo1.css'; const arr = [ { name:'name1', tel:'12343456783' }, { name:'name2', tel:'12343456784' }, { name:'name3', tel:'12343456785' } ]; export default class Demo1 extends React.Component { constructor(props) { super(props); this.state = { content: true, value: 'inputText' }; } handleClick(){ this.setState({ content: !this.state.content }) // this.refs.myInput.focus(); } handleChange(event) { this.setState({value: event.target.value}); } renderArr() { return arr.map((item,index)=>{ return <li key={index}>name:{item.name},tel:{item.tel}</li> }) } render(){ let btnStyle = { border: '1px solid #ccc', background:'#fff', color: '#a106ce' } return ( /* 注释 */ <div> <button style={btnStyle} className="btn" type="button" onClick={()=>this.handleClick()}>change state</button><br/> <p title={this.props.title} style={{ color:'#A349A4' }}>Hello { this.props.textCont}!</p> <p>{this.state.content ? 'initial value' : 'later value'}</p> { /* 标签里面的注释外面要用花括号 */ } <input type="text" value={this.state.value} ref="myInput" onChange={this.handleChange.bind(this)} /> <h4>{this.state.value}</h4> <DemoChild><p>lalala</p></DemoChild> <ul> { this.renderArr() } </ul> </div> ) } } Demo1.propTypes = { title: React.PropTypes.string.isRequired } Demo1.defaultProps = { textCont: 'React' } class DemoChild extends React.Component { constructor(props) { super(props); } render(){ return ( <div>我是子组件{this.props.children}</div> ) } }
demo1.css
ul { list-style: none; padding: 0; margin:0; display: flex; } .btn:focus { outline: none; }
demo2.js:父子组件生命周期
import React, { Component, PropTypes } from 'react'; import '../css/demo2.css'; export default class Demo2 extends Component { constructor(props){ super(props); this.state = { stateName: this.props.myName + ',你好', count: 0, } console.log('init-constructor'); } static get defaultProps() { return { myName: "xhh", age: 25 } } doUpdateCount(){ this.setState({ count: this.state.count+1 }) } componentWillMount() { console.log('componentWillMount'); } componentDidMount() { console.log('componentDidMount') } componentWillReceiveProps(nextProps){ console.log('componentWillReceiveProps') } shouldComponentUpdate(nextProps, nextState){ console.log('shouldComponentUpdate'); // return nextProps.id !== this.props.id; if(nextState.count > 10) return false; return true; } componentWillUpdate(nextProps,nextState){ console.log('componentWillUpdate'); } componentDidUpdate(prevProps, prevState){ console.log('componentDidUpdate'); } componentWillUnmount(){ console.log('componentWillUnmount'); } render(){ console.log('render'); return ( <div> <p className="colorStyle">姓名：{this.props.myName}</p> <p>问候：{this.state.stateName}</p> <p>年龄：{this.props.age}</p> <p>性别：{this.props.sex}</p> <p>父元素计数是:{this.state.count}</p> <button onClick={ this.doUpdateCount.bind(this) } style={{ padding: 5,backgroundColor: '#ccc' }}>点我开始计数</button> <SubMyPropType count1={this.state.count} /> </div> ) } } Demo2.propTypes = { myName: PropTypes.string, age: PropTypes.number, sex: PropTypes.string.isRequired } class SubMyPropType extends Component { componentWillMount() { console.log('subMyPropType-componentWillMount'); } componentDidMount() { console.log('subMyPropType-componentDidMount') } componentWillReceiveProps(nextProps){ console.log('subMyPropType-componentWillReceiveProps') } shouldComponentUpdate(nextProps, nextState){ console.log('subMyPropType-shouldComponentUpdate'); if(nextProps.count1 > 5) return false; return true; } componentWillUpdate(nextProps, nextState){ console.log('subMyPropType-componentWillUpdate'); } componentDidUpdate(prevProps, prevState){ console.log('subMyPropType-componentDidUpdate'); } componentWillUnmount(){ console.log('subMyPropType-componentWillUnmount'); } render(){ console.log('subMyPropType-render'); return( <p>子元素计数是:{this.props.count1}</p> ) } }
demo2.css
.colorStyle { color: #0f0; }