web-dev-qa-db-ja.com

React.js - コンポーネントメソッドへのアクセス

ReactJSの「外部」からコンポーネントメソッドにアクセスできないのはなぜですか？なぜそれが不可能であり、それを解決する方法はありますか？

次のコードを見てください。

var Parent = React.createClass({
    render: function() {
        var child = <Child />;
        return (
            <div>
                {child.someMethod()} // expect "bar", got a "not a function" error.
            </div>
        );
    }
});

var Child = React.createClass({
    render: function() {
        return (
            <div>
                foo
            </div>
        );
    },
    someMethod: function() {
        return 'bar';
    }
});

React.renderComponent(<Parent />, document.body);
javascriptreactjsdom
145
user1518183

Reactは ref attribute を通してあなたがやろうとしていることのためのインターフェースを提供します。コンポーネントにrefを割り当てると、そのcurrent属性がカスタムコンポーネントになります。

class Parent extends React.Class {
    constructor(props) {
        this._child = React.createRef();
    }

    componentDidMount() {
        console.log(this._child.current.someMethod()); // Prints 'bar'
    }

    render() {
        return (
            <div>
                <Child ref={this._child} />
            </div>
        );
    }
}

注：これは、子コンポーネントがクラスとして宣言されている場合にのみ機能します。ここに記載されているドキュメントのとおりです。 https：// facebook）。 github.io/react/docs/refs-and-the-dom.html#adding-a-ref-to-a-class-component

アップデート2019-04-01：クラスを使うように例を変更し、最新のReactごとに createRef を使うdocs。

更新2016-09-19：からガイダンスごとにrefコールバックを使用するように例を変更しました ref String属性 ドキュメント

169
Ross Allen

Reactの外部からコンポーネントの関数を呼び出したい場合は、renderComponentの戻り値で呼び出すことができます。

var Child = React.createClass({…});
var myChild = React.renderComponent(Child);
myChild.someMethod();

Reactの外部でReact Componentインスタンスへのハンドルを取得する唯一の方法は、React.renderComponentの戻り値を格納することです。 出典 。

38
Sjoerd

あるいは、Childのメソッドが本当に静的である場合（現在の小道具の状態ではなく、state）、staticsで定義してから静的クラスメソッドと同じようにアクセスできます。例えば：

var Child = React.createClass({
  statics: {
    someMethod: function() {
      return 'bar';
    }
  },
  // ...
});

console.log(Child.someMethod()) // bar
36
Paul O'Shannessy

React 16.3以降ではReact.createRefを使用できます（アクセスするにはref.currentを使用）

var ref = React.createRef()

var parent = <div><Child ref={ref} /> <button onClick={e=>console.log(ref.current)}</div>

React.renderComponent(parent, document.body)
5
Jay

React 0.12以降、APIは わずかに変更された です。 myChildを初期化するための有効なコードは次のようになります。

var Child = React.createClass({…});
var myChild = React.render(React.createElement(Child, {}), mountNode);
myChild.someMethod();
4
Yevgen Safronov

一部のコメントで述べたように、ReactDOM.renderはコンポーネントインスタンスを返さなくなりました。インスタンスを取得するためにコンポーネントのルートをレンダリングするときにrefコールバックを渡すことができます。

// React code (jsx)
function MyWidget(el, refCb) {
    ReactDOM.render(<MyComponent ref={refCb} />, el);
}
export default MyWidget;

そして：

// Vanilla javascript code
var global_widget_instance;

MyApp.MyWidget(document.getElementById('my_container'), function(widget) {
    global_widget_instance = widget;
});

global_widget_instance.myCoolMethod();
1
mgalgs

あなた可能性がありますこれもうまくいきますか？

class Parent extends Component {
  handleClick() {
    if (this._getAlert !== null) {
      this._getAlert()
    }
  }

  render() {
    return (
      <div>
        <Child>
        {(getAlert, childScope) => (
          <span> {!this._getAlert ? this._getAlert = getAlert.bind(childScope) : null}</span>
        )}
        </Child>
        <button onClick={() => this.handleClick()}> Click me</button>
      </div>
      );
    }
  }

class Child extends Component {
  constructor() {
    super();
    this.state = { count: 0 }
  }

  getAlert() {
    alert(`Child function called state: ${this.state.count}`);
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return this.props.children(this.getAlert, this)
  }
}
0
swennemen