如何在不将状态传递给子组件的情况下更新状态

Question

这是我当前React.js代码的一个简单示例。

https://jsfiddle.net/69z2wepo/14668/

var Main = React.createClass({
    getInitialState: function(){
        return {
            showText: false
        }
    },
    handleClick: function(){
        this.setState({
            showText: true
        })
    },
    render: function() {
        return (
            <div>
                <button onClick={this.handleClick}>Press me</button>
                <Child showText={this.state.showText} />
            </div>
        )
    }
});

var Child = React.createClass({
    render: function(){
        if(this.props.showText){
            return (
                <div>
                    Pressed
                </div>
            )
        }
        return (
            <div>
                Default text
            </div>
        )
    }
});

React.render(<Main/>, document.getElementById('container'));

当我将showText属性更改为true并将其传递给子组件时，如何立即将showText切换为false？

我想要的是这样的东西，除了回调不应该发送给孩子。

handleClick: function(){
    this.setState({
        showText: true
    }, function(){
        showText: false
    })
}

当按钮被按下时，我的Main组件应该只向子级发送true。否则，我希望它的状态总是为false。

Answer 1

根据我从您的描述中收集到的信息，这可能就是您想要的：https://jsfiddle.net/4vL3mubf/2/

在第一次点击后，子组件永远不会改变，但我认为这是你想要的。

基本上，主组件可以使用此函数来翻转状态：

componentDidUpdate: function(prevProps, prevState) {
    if (this.state.showText === true) {
        this.setState({showText: false});
    }
},

更新

更新了Jim对shouldComponentUpdate的使用。https://jsfiddle.net/4vL3mubf/3/

Answer 2

在父组件上调用setState将导致触发render函数，该函数又将重新呈现您的Child组件。您应该只需要在父对象上执行setState操作，层次的其余部分应根据该父对象状态重新渲染。

Answer 3

var updating = false;

var Main = React.createClass({
    getInitialState: function(){
        return {
            showText: false
        }
    },
    handleClick: function(){
        updating = !updating;
        alert('is updating: ' + updating);
        if(updating) {
            this.setState({
                showText: true
            });
        }
    },
    render: function() {
        return (
            <div>
                <button onClick={this.handleClick}>Press me</button>
                <Child showText={this.state.showText} />
            </div>
        )
    }
});

或者用另一种方式：

var Child = React.createClass({
    shouldComponentUpdate: function(nextProps, nextState) {
        return nextProps.showText;
    },
    render: function(){
        if(this.props.showText){
            return (
                <div>
                    Pressed
                </div>
            )
        }
        return (
            <div>
                Default text
            </div>
        )
    }
});

https://jsfiddle.net/69z2wepo/14670/