React学习之——状态提升
Posted 芜独独
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React学习之——状态提升相关的知识，希望对你有一定的参考价值。
React文档之状态提升链接链接: link.
状态提升:
在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享
实现一个华氏度和摄氏度的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
// 状态提升:
// 在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。
// 定义键值对
const scaleNames = {
c:'Celsius',
f:'Fahrenheit'
}
// 将华氏度转换为摄氏度
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
// 将摄氏度转换为华氏度
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}
// 温度转换
function tryConvert(temperature,convert) {
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}
// 判定水开了没有
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>The water would boil .</p>
}
return <p>The water would not boil</p>
}
// 温度输入组件
class TemperatureInput extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
// this.state = {temperature:''};
}
handleChange(e) {
// this.setState({temperature:e.target.value});
this.props.onTemperatureChange(e.target.value);
}
render() {
const temperature = this.props.temperature;
const scale = this.props.scale;
return (
<fieldset>
<legend>Enter temperature in {scaleNames[scale]}:</legend>
<input
value={temperature}
onChange={this.handleChange}
/>
</fieldset>
)
}
}
// 计算组件
class Caculator extends React.Component {
constructor(props) {
super(props);
this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
this.state = {temperature:'',scale:'c'};
}
handleCelsiusChange(temperature) {
this.setState({scale:'c',temperature});
}
handleFahrenheitChange(temperature) {
this.setState({scale:'f',temperature});
}
render() {
const scale = this.state.scale;
const temperature = this.state.temperature;
const celsius = scale === 'f' ? tryConvert(temperature,toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature,toFahrenheit) : temperature;
return (
<div>
<TemperatureInput
scale='c'
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale='f'
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
)
}
}
ReactDOM.render(<Caculator />,document.getElementById('root'))
</script>
</body>
</html>
效果截图
以上是关于React学习之——状态提升的主要内容，如果未能解决你的问题，请参考以下文章