在 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'));