如何获取中间组件's实例将其函数传递给reactjs中的子实例

How get middle component's instance to pass its function to child in reactjs?

本文关键字：实例 函数 reactjs 获取 何获取 中间 组件      更新时间：2023-09-26

如果我有一个组件：

var OuterComponent = React.createClass( {
    render: function() {
        return (
            <div>
                <MiddleComponent>
                    <Child parentFunctionShouldBe={this.middleComponentFunction} />
                </MiddleComponent>
            </div>
        );
    }
});

如何传递位于中间组件中的函数？问题是this指的是OuterComponent，而不是MiddleComponent。我不希望它是一个静态函数，而是一个实例函数。

另一个选项是使用高阶组件（HoC）。如果MiddleComponent主要为Child添加标记或功能，那么这是一个不错的选择。

var MiddleComponent = function (Wrapped) {
    var Component = React.createClass({
        middleComponentFunction: function () {},
        render: function () {
            return (
                <Wrapped {...this.props} parentFunctionShouldBe={this.middleComponentFunction} />
            );
        }
    });
    return Component;
}
var WrappedChild = MiddleComponent(Child);
var OuterComponent = React.createClass( {
    render: function() {
        return (
            <div>
                <WrappedChild passToChild="value" />
            </div>
        );
    }
});

此外，如果要将MiddleComponent与其他类型的组件一起使用，则可以自定义集成的发生方式。

var MiddleComponent = function (config, Wrapped) {
    var prop = config.prop || 'parentFunctionShouldBe';
    var Component = React.createClass({
        middleComponentFunction: function () {},
        render: function () {
            var extraProps = {};
            extraProps[prop] = this.middleComponentFunction;
            return <Wrapped {...this.props} {...extraProps} />;
        }
    });
    return Component;
}
// same result as above but configurable for other use cases
var WrappedChild = MiddleComponent({prop: 'parentFunctionShouldBe'}, Child);
var OuterComponent = React.createClass( {
    render: function() {
        return (
            <div>
                <WrappedChild passToChild="value" />
            </div>
        );
    }
});

您可以向组件添加ref，并从this.refs.componentRef:调用该方法

var OuterComponent = React.createClass( {
    callMethod: function() {
        this.refs.middleComponent.middleComponentFunction();
    },
    render: function() {
        return (
            <div>
                <MiddleComponent ref="middleComponent">
                    <Child parentFunctionShouldBe={this.callMethod} />
                </MiddleComponent>
            </div>
        );
    }
});

您可以执行类似的操作

var OuterComponent = React.createClass( {
    render: function() {
        return (
            <div>
                <MiddleComponent>
                    <Child />
                </MiddleComponent>
            </div>
        );
    }
});
var MiddleComponent = React.createClass({
    propTypes: {
      children: React.PropTypes.element.isRequired
    },
    render: function() {
      return (
         <div>
           {React.cloneElement(this.props.children, {parentFunctionShouldBe: this.middleComponentFunction})}
         </div>
      )
    },
    middleComponentFunction: function() {
       ...
    }
});
相关文章：