Javascript 为什么更改状态不会触发它'；它与道具有关

我写了一些代码来练习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;

---

对于道具，您将在

component willreceiveprops（）

子组件中的用法

componentWillReceiveProps(props){
  console.log(props.provaProps);
}

因此，每当父组件的状态得到更新时，它也会更新道具，但为了在子组件中获得更新的道具，我们使用

componentWillReceiveProps（）

看更多

此外，您忘记在道具中附加单击事件

 <div onClick={this.props.onClick}>
    <p>{this.props.provaProp}</p>         
 </div>

{this.props.provaProp}

我想您只是忘记了在

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;

import React，{Component}来自'React'；
类Prova扩展了组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
{this.props.provaProp}

)
}
}
导出默认Prova；

演示

类应用程序扩展了React.Component{
状态={
姓名：“乔瓦尼”
};
单击更改=（）=>{
this.setState（{name:“joe”}）；
};
render（）{
返回(
SONO应用程序
);
}
}
类Prova扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.provaProp}

);
}
}
ReactDOM.render（，document.getElementById（'app'））
因为您没有在子组件中单击
事件

将
Prova组件中的代码更改为

     <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>
      </div>


{this.props.provaProp}


解决了
这与OP的问题有什么关系？@Thole，更正了。这是我的答案，但应该提到的是，在JSX中嵌入组件时，
onClick
本身不起作用。这就是为什么我使用
handleClick
作为道具，而不是误导性的
onClick
。我认为这不会因此起作用。onClick不是子组件的函数更改为
this.props.onClick
，它会按预期工作。@Thole，我的错误，放弃了道具word@Tholle，明白了。我想我误解了问题Enrico，如果你再回到这个问题上，简短的回答是

     <div onClick={this.props.onClick}>
        <p>{this.props.provaProp}</p>
      </div>