[英]In ReactJS, How do I update child states from parent class?
这是家长班
class Root extends React.Component {
constructor(props) {
super(props);
this.state = {
word: Words,
};
}
changeTheWord(i) {
this.state.word.changeWord(i);
}
render() {
return (
<div className="game">
<ul>
<li><a href="#" onClick={() => this.changeTheWord('hey')}>Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
<this.state.word />
</div>
);
}
}
这是儿童班
class Words extends React.Component {
constructor(props) {
super(props)
this.state = {
data: "read"
}
}
changeWord(i) {
this.state.data = i;
}
render() {
var sentence = "testing";
if (this.state.data != null) {
sentence = this.state.data;
}
return (
<div class="center">
<div class="words">
<p>{sentence}</p>
</div>
</div>
);
}
}
我想做的是从父类Root调用子级的changeWord方法,但是由于某种原因它不起作用,React给我一个错误,TypeError:this.state.word.changeWord不是一个函数。
这是负责调用函数的行
<li><a href="#"onClick={ () => this.changeTheWord('hey')}>Home</a></li>
我该如何解决这个问题?
您使用React的逻辑有些错误。 为什么要保持整个React组件(此处为子组件)处于状态并使用复杂且令人困惑的方法对其进行变异? React的逻辑非常简单干净。 使用状态和道具,渲染子组件,并在必要时将其传递给它。 在继续之前,我强烈建议您阅读基本文档 。
可能您想做这样的事情。
class Parent extends React.Component { constructor( props ) { super( props ); this.state = { data: "default sentence", }; } changeTheWord = ( i ) => { this.setState( { data: i } ); } render() { return ( <div className="game"> <Child sentence={this.state.data} changeTheWord={this.changeTheWord} /> </div> ); } } const Child = props => ( <div> <ul> <li> <a href="#" onClick={() => props.changeTheWord( "hey" )}> Home </a> </li> <li> <a href="">News</a> </li> <li> <a href="">Contact</a> </li> <li> <a href="">About</a> </li> </ul> {props.sentence} </div> ); ReactDOM.render( <Parent />, document.getElementById( "root" ) );
<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="root"></div>
在您的示例中, word
state属性使用Words
类而不是其实例进行初始化。
相反,请尝试按以下方式初始化状态:
this.state = {
word: new Words()
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.