Question

我试着打破我的例子以保持简单。

这是我的代码：

import React from 'react';
import FeedColumnActionsNewPost from './FeedColumnActionsNewPost';
import FeedColumnActionsNewDogAction from './FeedColumnActionsNewDogAction';

class FeedColumnActions extends React.Component {
  constructor(props){
    super(props);

    this.toggleAction = this.toggleAction.bind(this);

    this.state = {
      new_action: this.props.new_action,
      new_post: "",
      new_dogAction: this.props.new_dog_action,
      new_dogActionClass: ""
    }
  }
  toggleAction(e){
    e.preventDefault();
    console.log(e.target.getAttribute('data-name'));
    if(e.target.getAttribute('data-name') == "newPost" && e.target.getAttribute("class") != "active"){
      this.setState({
        new_post: "active",
        new_action: !this.state.new_action
      });
    }else if(e.target.getAttribute('data-name') == "newPost" && e.target.getAttribute("class") == "active"){
      this.setState({
        new_post: "",
        new_action: !this.state.new_action
      });
    }else if(e.target.getAttribute('data-name') == "newDogAction" && e.target.getAttribute("class") != "active"){
      this.setState({
        new_dogActionClass: "active",
        new_dogAction: !this.state.new_dogAction
      });
    }else if(e.target.getAttribute('data-name') == "newDogAction" && e.target.getAttribute("class") == "active"){
      this.setState({
        new_dogActionClass: "",
        new_dogAction: !this.state.new_dogAction
      });
    }
  }
  render() {
    var that = this;
    return(
      <div>
        <div className="feed-action-box">
          <ul className="feed-action-bar">
            <li>
              <button onClick={this.toggleAction} className={this.state.new_post} data-name="newPost">
                <i data-name="newPost" className="fa fa-plus"></i>
                <span data-name="newPost">New Post</span>
              </button>
            </li>
            <li>
              <button onClick={this.toggleAction} className={this.state.new_dogActionClass} data-name="newDogAction" id="newDogAction">
                <i data-name="newDogAction" className="fa fa-paw"></i>
                <span data-name="newDogAction">New Dog Action</span>
              </button>
            </li>
          </ul>
        </div>
        { this.state.new_action ? <FeedColumnActionsNewPost /> : '' }

        { this.state.new_dogAction ? <FeedColumnActionsNewDogAction /> : '' }
      </div>
    );
  }
}

export default FeedColumnActions;

所以我有这个子组件，它通过主组件中的props接收它的状态。当用户单击按钮以激活新操作时，状态会正确更新，并且子组件<FeedColumnActionsNewPost />会立即显示。该子组件包含一个表单 - ＆gt;内容将发送到整个主组件，并且在提交表单时，主组件设置new_action: false。

当我在React Tools中检查整个过程时，主组件正确地将新状态传递给子组件。并且子组件状态立即变为：false。

虽然状态现在再次为假，但这条线似乎没有触发：

{ this.state.new_action ? <FeedColumnActionsNewPost /> : '' }

因此该组件保持可见。

为什么更改a的任何想法都不会影响这一行？

Answer 1

如果您从state派生任何props，则可能需要在组件上实施componentWillReceiveProps(nextProps)生命周期方法。

琐碎的是，这只会是this.setState(nextProps)，它会用传入的道具覆盖任何本地状态。

或者，您可以选择：this.setState({ new_action: nextProps.new_action })等等。

反应子组件不响应状态更改

1 个答案: