在工厂里面反应孩子

我想创建一个mixin，它会渲染一些会成为反应组件的部分组件。我发现我不能这样做，因为mixin_member: React.createClass({...})我需要使用React.createFactory()在工厂里面反应孩子

所以我有以下的mixin：

module.exports = function(tab_variable_name){ 
     return { 
       handleOptionGroupChange(tab){ 
         let new_state = {}; 
         new_state[tab_variable_name] = tab; 
         this.setState(new_state); 
       }, 
       propsToState(props){ 
         let new_state = {tab_variable_name: tab_variable_name}; 
         new_state[tab_variable_name+'s'] = Object.keys(props.data); 
         new_state[tab_variable_name] = Object.keys(props.data)[0]; 
         return new_state; 
       }, 

       componentWillReceiveProps(nextProps){ 
         this.setState(this.propsToState(nextProps)); 
       }, 
       getInitialState(){ 
         return this.propsToState(this.props); 
       }, 

       Menu: React.createFactory(React.createClass({ 
         render(){ 
           return (
            <ul id="Steps"> 
              {this.props.parent.state[tab_variable_name+'s'].map((item) => (
               <li 
                className={item == this.props.parent.state[tab_variable_name] ? "active" : null} 
                onClick={() => { 
                 let new_state = {}; 
                 new_state[tab_variable_name] = item; 
                 this.props.parent.setState(new_state); 
               }} 
               > 
                 {item} 
               </li> 
              ))} 
            </ul> 
           ); 
         } 
       })), 
       Panel: React.createFactory(React.createClass({ 
         render(){ 
           console.log(this.props.children); 
           return (
            <div id="Panel"> 
              {this.props.parent.state[tab_variable_name]} 
              {this.props.children} 
            </div> 
           ); 
         } 
       })) 
     }; 
};

我用它是这样的：

const Options = module.exports = React.createClass({ 
     displayName: "Options", 
     mixins: [require("./Tabs.Mixin")('options_group')], 
     render(){ 
       return (
        <div> 
          Options: 
          <Tabs_Menu parent={this} /> 
          <Tabs_Panel parent={this}> 
            <div>Selected tab: {this.state.options_group}</div> 
            <div>First panel child</div> 
            <div>Second panel child</div> 
            <div>Third panel child</div> 
          </Tabs_Panel> 
        </div> 
       ); 
     } 
});

但我得到这个错误：

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Panel`.

当我把这些组件单独的文件 - 变量，它工作得很好。此外，当我在控制台登录this.props.children（在混合料搅拌部件），记录的对象并不像反应成分，它只是这个：

所以，我怎么能访问，或更好，渲染这种组件的孩子？谢谢。

来源

2016-03-02 Márius Rak

不是您寻找的答案，但也许您应该考虑使用更高阶组件的组合：https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#。 5biblaju2 – Mark

我读过那篇文章，但我不认为它适用于我的情况。 –

我经历了反应代码，发现没有使用React.createFactory()是正确的，尽管控制台提示。但我还需要将autobind: false,添加到我的mixin对象中。现在一切正常，但是由于关闭了自动绑定，我预计会出现一些问题。

来源

2016-03-02 14:36:56

在工厂里面反应孩子

回答

相关问题