1.组件props的特性
@H_403_0@我们在设置state的时候可以修改,并且渲染到xml中, @H_403_0@props可以接收值,不过这个值是不可以修改的2.设置默认的props
@H_403_0@我们知道state都是我们预先设置xml需要使用的内容,同样的我们接收的props还可以设置默认值,如果调用的位置没有传递,就会在xml显示默认设置,和es6函数的参数默认设置值同理:import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; //设置组件 class Event extends React.Component { static defaultProps = {//类的静态属性 name: '默认值' }; constructor(props) { super(props); // 设置 initial state this.state = { msg: "hello",count: 1 }; } add(){ var newcount=this.state.count+1; this.setState({count:newcount }); } render() { return <div> <p>{this.props.name}</p> <p>{this.state.msg}</p> <p onClick={this.add.bind(this)}>{this.state.count}</p> </div>; } } ReactDOM.render( <div> <Event /> </div>,document.getElementById('root') ); registerServiceWorker();@H_403_0@设置默认值非常简单,采用static关键字修饰即可: @H_403_0@ static defaultProps = {//类的静态属性
name: '默认值'
}; @H_403_0@如果我们在调用位置传递的name属性,就会不采用默认值。 @H_403_0@显示:
3.state和props交互
@H_403_0@event组件定义状态msg,然后event2传递一个属性msg,这样在event2就可以用props直接显示了:import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; //设置组件 class Event extends React.Component { constructor(props) { super(props); // 设置 initial state this.state = { msg: "hello" }; } render() { return <div> <p>{this.state.msg}</p> <Event2 msg={this.state.msg} /> </div>; } } //设置组件2 class Event2 extends React.Component { render() { return <div> <p>{this.props.msg}</p> </div>; } } ReactDOM.render( <div> <Event /> </div>,document.getElementById('root') ); registerServiceWorker();