javascript - 为什么与 props 相关的状态改变不会触发

Question

我编写了一些代码来在 React 中进行练习。我希望有人向我解释为什么如果单击 clickChange 的目标 (h3)，状态不会更新。

下面是我的主要应用程序组件:

import React, { Component } from "react";
import Prova from "./components/prova";
import "./App.css";

class App extends Component {
  state = {
    name: "giovanni"
  };

  clickChange = () => {
    this.setState({ name: "joe" });
  };

  render() {
    return (
      <div>
        <h3>SONO APP</h3>
        <Prova onClick={this.clickChange} provaProp={this.state.name} />
      </div>
    );
  }
}

export default App;

在另一个组件下方，导入并调用(并呈现)到主应用程序组件中。现在，正如您所看到的，我设置了一个方法，clickChange，一旦您单击该元素，它应该更改状态，将“giovanni”切换为“joe”。

问题是:为什么不触发？我知道代码的渲染部分位于另一个组件 prova 中，但它的状态位于我的 App 组件中。因此，状态是在内部改变的，而不引用外部。

import React, { Component } from "react";

class Prova extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>{this.props.provaProp}</p>
      </div>
    );
  }
}

export default Prova;

Answer 1

我认为您只是忘记触发 Prova 组件内的 onClick 事件。

import React, { Component } from 'react';

class Prova extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>         
      </div>
    )
  }
}

export default Prova;

演示

class App extends React.Component {
  state = {
    name: "giovanni"
  };

  clickChange = () => {
    this.setState({ name: "joe" });
  };

  render() {
    return (
      <div>
        <h3>SONO APP</h3>
        <Prova onClick={this.clickChange} provaProp={this.state.name} />
      </div>
    );
  }
}

class Prova extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>