如何在ReactJS中从“外部”访问组件方法?

为什么我不能在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);

当前回答

正如在一些评论中提到的，ReactDOM。渲染不再返回组件实例。你可以在呈现组件的根时传入一个ref回调来获取实例，如下所示:

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

and:

// vanilla javascript code
var global_widget_instance;

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

global_widget_instance.myCoolMethod();

2017-02-07 06:53:44

其他回答

正如在一些评论中提到的，ReactDOM。渲染不再返回组件实例。你可以在呈现组件的根时传入一个ref回调来获取实例，如下所示:

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

and:

// vanilla javascript code
var global_widget_instance;

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

global_widget_instance.myCoolMethod();

2017-02-07 06:53:44

自React 0.12以来，API略有变化。初始化myChild的有效代码如下:

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

2015-08-31 13:24:36

如果你想在React外部的组件上调用函数，你可以在renderComponent的返回值上调用它们:

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

在React外部获取React Component实例句柄的唯一方法是存储React. rendercomponent的返回值。源。

2014-09-25 08:27:54

截至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)

2018-12-05 00:39:06

另一种方法很简单:

函数外:

function funx(functionEvents, params) {
  console.log("events of funx function: ", functionEvents);
  console.log("this of component: ", this);
  console.log("params: ", params);
  thisFunction.persist();
}

绑定:

constructor(props) {
   super(props);
    this.state = {};
    this.funxBinded = funx.bind(this);
  }
}

请在这里查看完整的教程:如何从外部使用React组件的“this”?

2019-12-05 15:32:03

如何在ReactJS中从“外部”访问组件方法?

推荐文章

最新文章

标签