Question

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

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。否则我希望它的状态始终是假的。

Answer 1

从我可以从你的描述中收集到的内容，这可能是你想要的：https://jsfiddle.net/4vL3mubf/2/

第一次点击后儿童组件永远不会改变，但那是我想你想要的。

基本上，主要组件可以使用此功能翻转状态：

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

<强>更新

更新了吉姆对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/

如何更新状态而不将其传递给子组件

3 个答案: