javascript - 更改父项的 Prop 后，不会重新渲染 React 子项组件

Question

我正在学习 React 并遇到过这种情况。基本上我有一个带有输入框的 React 组件测试，在它里面我有另一个组件 Hello，它打印出 Hello + 所有文本用户类型。所以我期望的是，如果我键入 sth，那么 this.text 将被更新，然后 Hello 组件将重新呈现。然而，这并没有发生。我意识到我需要在 this.state 中设置“文本”然后 Hello 将重新呈现。我的问题是为什么 Hello 组件没有重新渲染，尽管它的 props 已经改变了？提前致谢。

import ReactDOM from "react-dom";
import React, { Component } from "react";

import Hello from "./hello";

class Test extends Component {
  constructor(props) {
    super(props);          
    this.handleChange = this.handleChange.bind(this);  
  }    


  handleChange(e) {     
    this.text = e.target.value;    
    console.log(this.text);   
  }

  render() {
    return (
      <div>
        <h1>Test</h1>
        <form>
          <input value={this.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>          
        </form>
        <Hello name={this.text} />
      </div>
    );
  }
}

Hello.js 组件是

export default ({ name }) => <h1>Hello {name}!</h1>;

Answer 1

您的代码有 2 个问题。首先，您需要在构造函数中包含 state。其次，您需要使用 React 提供的 setState 设置状态。

import ReactDOM from "react-dom";
import React, { Component } from "react";

import Hello from "./hello";

class Test extends Component {
  constructor(props) {
    super(props); 
    // This is how you set state
    this.state = {  
      text:''
    }         
    this.handleChange = this.handleChange.bind(this);  
  }    


  handleChange(e) {
    // This is how you update state
    this.setState({text: e.target.value})     
    console.log(this.text);   
  }

  render() {
    return (
      <div>
        <h1>Test</h1>
        <form>
          <input value={this.state.text} onChange={e => this.handleChange(e)} />
          <button>Add</button>          
        </form>
        <Hello name={this.state.text} />
      </div>
    );
  }
}

Here是一份文档，您可以在其中阅读更多相关信息。