繁体   English   中英

在ReactJS中,如何从父类更新子状态?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM