通常，一些組件需要反映相同的數據更改，這種情況推薦將共享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