Question

我有一个第一次完美渲染的组件，但传入的变量没有任何变化会影响任何东西，即使传入true或false for open似乎总能正常工作。为什么这不起作用？

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响应组件状态/道具的变化，而不仅仅是任何变量的变化。让您的#include <stdio.h> int main (void) { printf("Enter the number of students, and number of tests score per student: \n\n"); // Variables are declared as needed with names describing // what they are to make the code self-documenting. // They are not unnecessarily initialized allowing warnings to help out. int num_students; int tests_per_student; scanf("%d", &num_students); scanf("%d", &tests_per_student); // Each student is fully processed in a single loop. No arrays needed. // Note the other variables declared in place in as narrow a scope as possible. for(int i=0; i < num_students; i++) { // By declaring `max` inside the loop it is guaranteed to be reset each // loop iteration. Code outside the loop cannot affect it. It cannot // be confused with another `max`. int max = 0; printf("Enter the scores for student %d \n", (i+1)); for(int j=0; j < tests_per_student; j++) { // Similarly for score. We only need it inside this one loop. int score; scanf("%d", &score); if(score > max) { max = score; } } // With all the work done, print the max for this student and move on // to the next one. printf("The highest score for student %d was:\t %d\n\n", (i+1), max); } }属性成为组件状态的一部分，并使用open进行更新。

setState

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>
      )
    }

}

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

2 个答案: