Question

这是父类

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>

我该如何解决这个问题？

Answer 1

您使用React的逻辑有些错误。为什么要保持整个React组件（此处为子组件）处于状态并使用复杂且令人困惑的方法对其进行变异？ React的逻辑非常简单干净。使用状态和道具，渲染子组件，并在必要时将其传递给它。在继续之前，我强烈建议您阅读basic documentation。

可能您想做这样的事情。

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>

Answer 2

在您的示例中，word状态属性是用类Words而不是它的实例初始化的。

相反，请尝试按以下方式初始化状态：

this.state = {
  word: new Words()
}

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

2 个答案: