通常,一些组件需要反映相同的数据更改,这种情况推荐将共享state移动到它们最近的公共祖先上。

在这里有一个例子:有一个温度计算器计算在给定温度是否能让水沸腾,用户可以输入华氏温度也能输入摄氏温度,当改变一种温度时另一种温度也要跟着改变
在这里摄氏温度输入框的值与华氏温度输入框的值要相互关联,所以这两个输入框都引用了同一个状态,所以这个共享的状态要位于他们最近的公共祖先上。具体代码如下:

// 温度输入组件
class TemperatureInput extends React.Component{
handleChange(event){
this.props.change(this.props.scale,event.target.value);
}
render(){
return <p>
<label>{this.props.scale === 'c' ? '摄氏温度' : '华氏温度'}:</label>
<input type='text' value={this.props.value} onChange={this.handleChange.bind(this)}/>
</p>
}
}
// 显示是否沸腾的组件
class ShowBoil extends React.Component{
render(){
if(this.props.temperature >= 100){
return <p>The water would boil</p>
} else {
return <p>The water would not boil</p>
} }
}
// 温度计算组件
class Calculator extends React.Component{
constructor(props){
super(props);
this.state = {
scale:'c',
temperature:''
};
}
changeState(scale,temperature){
this.setState({scale,temperature});
}
covertTemperature(scale,temperature){
if(Number.isNaN(parseFloat(temperature))){
return ''
}
// 把摄氏温度转换为华氏温度
if(scale === 'c'){
return ((temperature * 9 / 5) + 32) + '';
}
// 将华氏温度转换为摄氏温度
else {
return ((temperature - 32) * 5 / 9 ) + '';
}
}
render(){
const scale = this.state.scale;
const temperature = this.state.temperature;
const cTemperature = scale === 'f'?this.covertTemperature(scale,temperature):temperature;
const fTemperature = scale ==='c'?this.covertTemperature(scale,temperature):temperature;
return (
<div>
<TemperatureInput change={this.changeState.bind(this)} value={cTemperature} scale='c'/>
<TemperatureInput change={this.changeState.bind(this)} value={fTemperature} scale='f'/>
<ShowBoil temperature={cTemperature}/>
</div>
)
}
}

React——共享state的更多相关文章

  1. React:Lifting State Up

    在学习React的组件的时候,我也好奇组件间需要共享状态或通信的时候,React是如何处理的.在文档的QUICK START的提到Lifting State Up(状态提升),并不是什么新鲜东西.只是 ...

  2. react 中state与props

    react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...

  3. [React] Update State in React with Ramda's Evolve

    In this lesson we'll take a stateful React component and look at how we can refactor our setState ca ...

  4. React给state赋值的两种写法

    如果你看过React的官方文档,就会对怎么给局部state赋值有一定的了解.如下代码: class Test extends React.Component { constructor(props) ...

  5. Recoil & React official state management

    Recoil & React official state management Redux Recoil.js https://recoiljs.org/ A state managemen ...

  6. React & update state with props & Object.assign

    React & update state with props & Object.assign Object.assign({}, oldObj, newObj) https://re ...

  7. 七天接手react项目 —— state&事件处理&ref

    state&事件处理&ref 在 react 起步 一文中,我们学习了 react 相关知识:jsx.组件.props.本篇将继续研究 state.事件处理和ref. state St ...

  8. React组件State提升(译)

    译自:https://reactjs.org/docs/lifting-state-up.html (适当进行了裁减) 通常我们会碰到这样的情况,当某个组件的state数据改变时,几个React组件同 ...

  9. [React Fundamentals] State Basics

    State is used for properties on a component that will change, versus static properties that are pass ...

随机推荐

  1. maven的聚合和继承

    Maven的聚合特性能够把项目的各个模块聚合在一起构建: 而Maven的继承特性则能帮组抽取各模块相同的依赖和插件等配置,在简化POM的同时,还能促进各个模块配置的一致性. 聚合:新建一个项目demo ...

  2. Unity3d 基本设计开发 原则(提高代码可读性)

    参考:http://blog.csdn.net/qq_34134078/article/details/51780356 1.单一原则 即:明确类的定义.通俗来讲,让他们只做一件事,而不是多件事. 提 ...

  3. 【转】高斯-克吕格投影与UTM投影异同

    高斯-克吕格(Gauss-Kruger)投影与UTM投影(Universal Transverse Mercator,通用横轴墨卡托投影)都是横轴墨卡托投影的变种,目前一些国外的软件或国外进口仪器的配 ...

  4. 企业级Docker私有仓库之Harbor部署(http)

    部署环境 Centos7.3 x64 docker-ce-17.06.0 docker-compose-1.15.0 Python-2.7.5(系统默认) Docker及Docker-compose安 ...

  5. mybatis支持oracle批量插入

    问题:mysql使用mybatis批量插入时,通过foreach标签,将每条记录按照逗号","连接即可. 但是,oracle不支持. oracle支持如下写法: <inser ...

  6. JavaScript基本语法 -- 条件语句 & 循环语句

    条件语句 条件语句(Conditional statement)是JavaScript里面的基本结构之一,程序根据表达式的真假决定执行或者跳过某个分支,于是,条件语句有时候也可以称为"分支语 ...

  7. 使用jvisualvm来远程观察Java程序及jvisualvm插件[转]

    jvisualvm是JDK自带的监控JVM运行状况的工具,利用jvisualvm可以查看JVM的运行.GC情况:线程的运行情况:内存中类及实例的情况等. 使用jvisualvm来远程观察Java程序, ...

  8. dfs_SPFA 判负环

    感觉有点像tarjan求SCC #include <iostream> #include <cstdio> #include <algorithm> #includ ...

  9. CF341C. Iahub and Permutations [DP 排列]

    http://codeforces.com/contest/341/problem/C 题意: 有一个长度为n的排列a,其中有一些位置被替换成了-1.你需要尝试恢复这个排列,将-1替换回数字.求有多少 ...

  10. 初学sql

    bit 布尔类型 int nvarchar datetime 常用类型 nvarchar(max) 存文章(不超过5000) 字符串 用 '' . char/nchar,varchar/nvarcha ...