React 状态提升

状态提升"/>

React 状态提升

React 状态提升

复习：2019-1-22

需求：react是一个数据单向传值的框架，子组件不能直接给父组件传值。

如果内部多个子组件共同使用相同的数据，并且互相影响。那么可以将这部分共有的数据存放在父组件的属性中，将 handleChange 作为回调函数传递给子组件。不同子组件会更改某个参数，这部分参数会影响其他子组件的行为。确保父组件内部的数据改变会改变子组件的属性。

案例：公里和英里进行转换，总数是固定的，不同子组件需要根据单位进行转换，将数据存放在父组件中。

tips：在Chrome react 工具可以查看不同组件的传值，不需要每次console.log。

class Text extends React.Compontent {constrcutor(props) {super(props);this.state({lan: null,length: 0});}handleInputChange = (e) => {if (e.target.name === 'zh') {this.setState({lan: 'zh',length: e.target.value})}else if (e.target.name === 'en') {this,setState({lan: 'en',length: e.target.value})}}render() {const lan = this.state.lan;const chinese = lan === "zh" ? length : length * 0.5;const english = lan === "en" ? length : length * 2;return (<div>{chinese}</div><div>{english}</div>);}
}

不管输入的是英语还是汉语的单位，那么长度会转化成为英语和汉语进行处理显示，实际上只有一个数据。