Question

我正在创建几个React组件，除渲染数据外，其行为方式相同。我将类似的逻辑放入mixin，包括渲染功能。我唯一传递的是负责以所需方式呈现数据的附加组件。

var A = React.createClass({
    mixins: [MyMixin],
    MyComponent: B,

});

var B = React.createClass({
    get_value: function() {
        // should return some value using top-level context
    },

    render: function() {
       var x = this.get_value()
    }
})

MyMixin = {
   // some logic
   render: function() {
       <div>
           // some common markup
           <this.MyComponent
             // some props
           />
       </div>
   }
}

这里的问题是组件B（通过mixin中的变量呈现）没有来自父级的顶级上下文。与此同时，'common markup'块中的组件确实具有它。如何以上述方式呈现组件并保存顶级上下文？

Answer 1

您无法访问顶级上下文，因为B不会继承或与A共享任何内容。您的mixin只是共享功能的简单扩展，您只需呈现组件A中定义的组件。没有任何内容可以绑定A和乙

你能做的就是将所需的东西传递给B的道具。

<div>
    // some common markup
    <this.MyComponent
         parentProps={this.props}
         parentState={this.state}
    />
</div>

你真正应该做的是在mixin中添加所有常用代码，并在两个组件中使用mixin。由于渲染对于您的组件并不常见，因此您应该在每个组件中定义渲染，或者为此目的进行其他混合。

如何从变量渲染组件并保存道具和上下文？

1 个答案: