React js，为什么在更改open的值时我的组件不重新渲染？

Question

我有一个组件，第一次可以完美呈现，但是对传入变量的任何更改都不会影响任何东西，即使为open传递true或false似乎总是可以正常工作。 为什么不起作用？

const ChatWindow = ({ open, prevContent }) => {

  var content = prevContent.messages.map(message => (
          <Message player={message.player} text={message.text} />));

  const openClose = () => {
    if(open){
      open = false;
    } else {
      open = true;
    }
    console.log(open);
  }



  return (
    <div className="ChatWindow">
      <div className="openWindow" onClick={() => openClose()}>{open ? "X" : "O"}</div>

      <div className="Content">
        {content}
      </div>

      <style jsx>{`
       .ChatWindow {
          opacity: ${open ? "1.0" : "0.3"};
        }
        .Content {
          max-height: ${open ? "400px" : "0px"};
          opacity: ${open ? "1.0" : "
          overflow-y: ${open ? "scroll" : "hidden"};
        }
      `}</style>
    </div>
  )
}

Answer 1

React响应组件状态/属性的变化，而不仅仅是任何变量的变化。 使您的open属性成为组件状态的一部分，并使用setState进行更新。

constructor(props) {
    super(props);
    this.state = {
        open: false,
    };
}

Answer 2

您需要在打开/关闭时进行重新渲染，因为它最好在当前组件的父级中保持状态

class App extends React.Component {
   state= {
      open: false;
   }
   openClose = () => {
    this.setState(prevState => ({open: !prevState.open}))
  }
  render() {
   const { prevContent } = this.props;
   var content = prevContent.messages.map(message => (
          <Message player={message.player} text={message.text} />));

    const { open } = this.state;
      return (
        <div className="ChatWindow">
          <div className="openWindow" onClick={() => this.openClose()}>{open ? "X" : "O"}</div>

          <div className="Content">
            {content}
          </div>

          <style jsx>{`
           .ChatWindow {
              opacity: ${open ? "1.0" : "0.3"};
            }
            .Content {
              max-height: ${open ? "400px" : "0px"};
              opacity: ${open ? "1.0" : "
              overflow-y: ${open ? "scroll" : "hidden"};
            }
          `}</style>
        </div>
      )
    }

}