反應：State 不會改變 onClick 和更新組件

Question

我有一個帶有 state 的父組件來檢測用戶是否單擊了它，並且父組件使用了一個子組件，該子組件包含一個我想在用戶單擊父組件時隱藏的項目。

這是父組件：

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的 state ，然后我將clicked作為道具傳遞給我的子組件，並在子組件內根據clicked的 state 呈現項目. 現在，如果我單擊父組件，則 state 不會更改，並且該項目仍在不應該的情況下呈現。 問題是什么？

Answer 1

您需要使用this.props.isclicked訪問子組件中的道具所以您的子組件應該如下所示

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