时间戳

首页 > 解决方案 > 在 ReactJS 中，如何从父类更新子状态？

javascript - 在 ReactJS 中，如何从父类更新子状态？

问题描述

这是父类

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>

我该如何解决这个问题？

标签： javascriptreactjs

解决方案

你使用 React 的逻辑有点错误。为什么要在你的状态中保留整个 React 组件（这里是子组件）并使用复杂且令人困惑的方法对其进行变异？React 的逻辑非常简单干净。使用 state 和 props，渲染子组件并在必要时将它们传递给它。在继续之前，我强烈建议阅读基本文档。

可能你想做这样的事情。

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>

推荐阅读