Question

我有一个父组件，其状态可以检测用户是否单击了它，并且父组件使用子组件，该子组件包含一个如果用户单击父组件则要隐藏的项目。

这是父组件：

class Parent extends Component {
  constructor (props) {
    super(props);
    this.state = {
      clicked: false
    };
  }

  setClick = () => {
    this.setState({clicked: true});
  };

  render() { 
    // ... 
    return (
      <div onClick={this.setClick}>
        <Child isClicked={this.state.clicked} />
      </div>
    )
  }  
}

这是我返回中的子组件：

return (
  <div ...>
      {!props.isClicked && ( ... then render the item ... )}
  </div>
)

因此，当用户单击我的父组件时，我试图更改clicked的状态，然后将clicked作为道具传递给子组件以及子组件内部组件根据clicked的状态呈现项目。现在，如果我单击父组件，则状态不会改变，并且在不应该显示的状态下仍会呈现该项目。有什么问题吗？

Answer 1

您需要访问带有this.props.isclicked的儿童的道具所以您的子组件应该看起来像这样

class Child extends React.Component<{isClicked:boolean}>{
    render(){
        return (
            <div>
               {`I am ${this.props.isClicked ? `clicked` : `not clicked` }`}
           </div>
         )
    }
}

反应：状态不会改变onClick和更新组件

1 个答案: