Реагировать детей внутри фабрики

Question

Я хочу создать 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 в консоли (в подмешать компонентов), вход объект не похож реагировать компонент, это просто так:

Так как я могу получить доступ, или лучше, оказывать дети такого компонента? Спасибо.

Answer 1

Я прошел через код ответа и выяснил, что не использовать React.createFactory() был прав, несмотря на подсказку консоли. Но мне также нужно добавить autobind: false, к моему объекту mixin. Теперь все работает правильно, однако я ожидаю некоторые проблемы из-за того, что вы отключили автообщение.