1

反応プロジェクトには 2 つのコンポーネントがあります。1、親 2、子

ここで、親コンポーネントで childMethod を使用したいと思います。stackoverflow のいくつかのページでは、誰もが refs が有効であると述べています。しかし、私のプロジェクトでは、うまくいきません。

class Parent extends Component {
 parentMethod(){
   this.refs.child.childMethod();
 }

 render() {
  return (
    <Child ref='child'/>
  );
 }
}



class Child extends Component {
 childMethod() {
    alert('You made it!');
 }
 render() {
  return (
    <h1 ref="hello">Hello</h1>
  );
 }
}

上記のコードを使用すると、ブラウザ コンソールに 1 つのエラー コードが表示されます。 _this3.refs.child.childMethod は関数ではありません

子メソッドを使いたいので、2点質問があります。1,「_this3」とは？refs を正しく使用するにはどうすればよいですか? 2、それについて他に何か考えはありますか？

4

1 に答える 1

0 
class Parent extends React.Component {

  constructor(props) {
    super(props);

    // binding methods to the class so they don't lose 'this'
    // when invoked from another environment.
    this.parentMethod = this.parentMethod.bind(this);
    this.setChildRef = this.setChildRef.bind(this);
  }

  parentMethod() {
    this.childNode.childMethod();
  }

  // intentionally avoided using an arrow fuction inside JSX
  // for we don't want a new anonymous fn created on every render.
  setChildRef(node) { // receives reference to component as argument
    this.childNode = node;
  }

  render() {
    return (
      <div>
        <Child ref={this.setChildRef}/>
        <button onClick={this.parentMethod}>Parent Button - Click me :)</button>
      </div>
    );
  }
}

class Child extends React.Component {
  childMethod() {
    alert('You made it!');
  }

  render() {
    return (
      <h1>Child</h1>
    );
  }
}

作業フィドル: https://jsfiddle.net/free_soul/9vrLrw8h/

  1. 「_this3」とは？

    おそらく、デバッグ中にブラウザに表示される変数です。実行コンテキストを表すだけです。

  2. refs を正しく使用するにはどうすればよいですか?

    をコールバック属性refとして扱い、refs オブジェクトに依存しないことをお勧めします。refs オブジェクトを使用する場合は、子孫コンポーネントの参照にアクセスしないでください。コンポーネントの API の一部ではなく、プライベート アクセサーとして扱う必要があります。コンポーネント インスタンスで公開されているメソッドのみをそのパブリック API として扱います。refs

于 2016-11-26T10:57:37.363 に答える