import React from "react";import 'bootstrap/dist/css/bootstrap.min.css';const infoMap = { cTempType: '摄氏度', fTempType: '华氏度', coolInfo: '今天真冷', warmInfo: '今天气温舒适。', hotInfo: '今天有点热。', veryHotInfo: '今天真热。', howInfo: '今天的天气怎么样？', cCoolStandard: 0, cWarmStandard: 20, cHotStandard: 38, fCoolStandard: 32, fWarmStandard: 68, fHotStandard: 100, outputInfo: '请输入气温(', outputInfoEnd: ')：', titleOneInfo: '状态提升示例', titleTwoInfo: '示例1：两个文本框的气温数值相同(不考虑摄氏度和华氏度的区别)', titleThreeInfo: '示例2：两个文本框的气温相等(考虑了摄氏度和华氏度之间的转换关系)',}const tempType = { c: infoMap.cTempType, f: infoMap.fTempType};function TempLevel(props){ if(props.temp === 'c'){ return <TempCelsiusLevel wlevel={props.wlevel}/>; } else if(props.type === 'f'){ return <TempFahrenheitLevel wlevel={props.wlevel}/>; }}function TempCelsiusLevel(props){ if (props.wlevel <= infoMap.cCoolStandard) { return <p>{infoMap.coolInfo}</p> } else if (props.wlevel > infoMap.cWarmStandard && (props.wlevel <= infoMap.cWarmStandard)) { return <p>{infoMap.warmInfo}</p> } else if ((props.wlevel > infoMap.cWarmStandard) && (props.wlevel <= infoMap.cHotStandard)) { return <p>{infoMap.hotInfo}</p> } else if (props.wlevel > infoMap.cHotStandard) { return <p>{infoMap.veryHotInfo}</p> } else { return <p>{infoMap.howInfo}</p> }}function TempFahrenheitLevel(props){ if (props.wlevel <= infoMap.fCoolStandard){ return <p>{infoMap.coolInfo}</p> } else if ((props.wlevel > infoMap.fCoolStandard) && (props.wlevel <= infoMap.fWarmStandard)){ return <p>{infoMap.warmInfo}</p> } else if ((props.wlevel > infoMap.fWarmStandard) && (props.wlevel <= infoMap.fHotStandard)) { return <p>{infoMap.hotInfo}</p> } else if (props.wlevel > infoMap.fHotStandard){ return <p>{infoMap.veryHotInfo}</p> } else { return <p>{infoMap.howInfo}</p> }}class Temperature extends React.Component{ constructor(props){ super(props); this.handleTempChange = this.handleTempChange.bind(this); } handleTempChange(e){ this.props.onTemperatureChange(e.target.value); } render(){ const temperature = this.props.temperature; const type = this.props.type; return ( <div> <span> <label>{infoMap.outputInfo}{tempType[type]}{infoMap.outputInfoEnd}</label> <input name={type} value={temperature} onChange={this.handleTempChange}/> <TempLevel temp={type} wlevel={temperature}/> </span> </div> ); }}class TemperatureApp extends React.Component{ constructor(props){ super(props); this.state = { temperature: '', }; this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this); } handleCelsiusChange(temperature){ this.setState({ type: 'c', temperature }); } handleFahrenheitChange(temperature){ this.setState({ type: 'f', temperature }); } render(){ const temperature = this.state.temperature; return ( <div> <Temperature type="c" temperature={temperature} onTemperatureChange={this.handleCelsiusChange}/> <Temperature type="f" temperature={temperature} onTemperatureChange={this.handleFahrenheitChange}/> </div> ) }}function toCelsius(fahrenheit){ return Math.round((fahrenheit - 32) * 5 / 9);}function toFahrenheit(celsius){ return Math.round((celsius * 9 / 5) + 32);}function toConvert(temperature, convert){ if (Number.isNaN(temperature)){ return ''; } return convert(temperature).toString();}class TemperatureAppTwo extends React.Component{ constructor(props){ super(props); this.state = { temperature: '0', scale: 'c' }; this.handleCelsiusChange = this.handleCelsiusChange.bind(this); this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this); } handleCelsiusChange(temperature){ this.setState({ type: 'c', temperature }); } handleFahrenheitChange(temperature){ this.setState({ type: 'f', temperature }); } render(){ const type = this.state.type; const temperature = this.state.temperature; const celsius = type === 'f' ? toConvert(temperature, toCelsius) : temperature; const fahrendeit = type === 'c' ? toConvert(temperature, toFahrenheit) : temperature; return ( <div> <Temperature type="c" temperature={celsius} onTemperatureChange={this.handleCelsiusChange}/> <Temperature type="f" temperature={fahrendeit} onTemperatureChange={this.handleFahrenheitChange}/> </div> ); }}const AdvancedStateExample = () => { return ( <span> <h2>{infoMap.titleOneInfo}</h2> <hr/> <h3>{infoMap.titleTwoInfo}</h3> <TemperatureApp/> <hr/> <h3>{infoMap.titleThreeInfo}</h3> <TemperatureAppTwo/> </span> );}export default AdvancedStateExample;

运行效果：