在ReactJS中更改构造函数属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在ReactJS中更改构造函数属性相关的知识,希望对你有一定的参考价值。

我有一个关于反应构造函数的问题,因为我使用了角度和习惯于方式绑定行为。我不知道如何从构造函数更改属性。并解释我如何做不到这一点,并解释我如何实现我的目标。

class example extends React.Component {
 constructor(){
   super();
   this.changeExample = this.changeExample.bind(this)
   this.valueExample = 'Hello Example'
 }
 changeExample() {
   this.valueExample = 'Hello StackOverFlow'
 }
 render()
 return(
   <button onClick="{this.chnageExample}"></button>
   <div className="example">{this.valueExample}</div>
 )

}
答案

在您的示例中,您应该在状态中使用值Example。在构造函数中,您为组件设置初始状态

constructor(props){
    super(props)
    this.state = { valueExample: "" }
}

changeExample(){
   this.setState({ valueExample: "Hello ..." })
}

单击按钮后,组件将重新渲染,valueExample将在视图中更新。

在react中,组件(视图)仅在组件的状态或道具发生更改时才更新(重新渲染)。你可以阅读reactjs https://reactjs.org/docs/components-and-props.html https://reactjs.org/docs/state-and-lifecycle.html的文档

另一答案

他有权利。首先必须使用this.state,因为我们必须设置初始状态,然后使用this.setState获取新值(没有仪表专业或我们希望的女巫状态)

以上是关于在ReactJS中更改构造函数属性的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Reactjs 中添加丰富的代码片段?

Python代码阅读(第38篇):根据谓词函数和属性字符串构造判断函数

在 Visual Studio 中创建构造函数的代码片段或快捷方式

javascript 请记住在更改原型时设置构造函数属性

片段事务中的实例化错误

如何将本地json文件获取到reactjs中的构造函数中