如何从 ReactJS 中的“utside”访问组件方法？

小编典典

如何从 ReactJS 中的“utside”访问组件方法？

all

为什么我可以从 ReactJS 中的“utside”访问组件方法？为什么不可能，有什么办法可以解决吗？

考虑代码：

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);

阅读 105

2022-06-25

共1个答案

小编典典

refReact 通过属性为您尝试执行的操作提供了一个接口。分配一个组件 a 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 更新： 将示例更改为使用类和createRef最新的 React 文档。

2016 年 9 月 19 日更新： 将示例更改为
根据ref字符串属性文档中的指导使用 ref 回调。

2022-06-25