在 react.js 中使用沒有這個的 setState

Question

我是 React 的新手（通常對 Javascript 也是相當新的），並試圖將我的頭腦圍繞在 setState 可以做什么來重新呈現頁面上的 React 元素上。

有沒有辦法在一個組件中使用 setState 來改變一個完全不同的元素（即可能只共享 DOM 根節點的組件）的狀態？ 我試圖實現這一點，但收到錯誤“myElementOne.setState 不是函數”。

我應該有另一種方法來解決這個問題嗎？

var App = React.createClass({
    render() {
        return (
            <div>
                <ElementOne id="abc12345"/>
                <ElementTwo/>
            </div>
        );
    }
});

var ElementOne = React.createClass({
    getInitialState() {
        return ({isShowing: true});
    },

    render() {
        if (this.state.isShowing) {
            return (
                <div id="abc12345">
                    <h1>Hello World!</h1>
                </div>
            );
        } else {
            return <div/>;
        }
    }
});

var ElementTwo = React.createClass({
    render() {
        return <a href="#" onClick={this.toggle.bind(null,this)}>Click here to Show/Hide!</a>;
    },

    toggle() {
        var myElementOne = document.getElementById("abc12345");
        myElementOne.setState({isShowing: false});
    }
});

ReactDOM.render(<App/>,document.getElementById('content'));

Answer 1

您可以通過以下方式實現此目的： http : //codepen.io/PiotrBerebecki/pen/YGEmBE

這個想法是：

1. 在您的父組件（ App ）中維護狀態
2. 將此狀態傳遞給ElementOne
3. 通過傳遞給ElementTwo的回調函數修改狀態的傳遞能力

完整代碼：

var App = React.createClass({
    getInitialState() {
      return ({
        isShowingInParent: true
      });
    },

    toggleInParent() {
      this.setState({
        isShowingInParent: !this.state.isShowingInParent
      });
    },

    render() {
        return (
            <div>
                <ElementOne id="abc12345" isShowing={this.state.isShowingInParent}/>
                <ElementTwo toggle={this.toggleInParent}/>
            </div>
        );
    }
});

var ElementOne = React.createClass({
    render() {
        if (this.props.isShowing) {
            return (
                <div id="abc12345">
                    <h1>Hello World!</h1>
                </div>
            );
        } else {
            return <div/>;
        }
    }
});

var ElementTwo = React.createClass({
    render() {
        return <a href="#" onClick={this.props.toggle.bind(this)}>Click here to Show/Hide!</a>;
    }
});

ReactDOM.render(<App/>,document.getElementById('content'));