从外部函数渲染后改变ReactJS类的状态

Question

在学习一些reactjs并试图保持和注意结构（同时看到我可以去reactjs的地方）..我试图保留一个std JavaScript命名空间我知道...

我有以下内容完美呈现初始消息，但reactTestjsx.hello.randomMsgChange();尝试设置已创建的反应类的状态时会引发错误。

是否可以通过这种方式访问​​反应渲染类？

//general js stuff 
var reactTest = { 
    toolbox: { 
     shuffle: function(o){ 
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
      return o; 
     } 
    } 
}; 

//JSX components 
var reactTestjsx = {}; 
reactTestjsx.hello ={ 
    init: function(){ 
     reactTestjsx.hello.randomMsgChange(); 
    }, 

    randomMsgChange: function(){ 
     setInterval(function(){ 
      var msg = reactTest.toolbox.shuffle([ 
       'hello world', 
       'hello solar system', 
       'hello universe' 
      ])[0]; 

      //issue here, cannot access the setState of the "reactTestjsx.hello.show" object 
      reactTestjsx.hello.show.setState(msg); 
     },1000) 
    }, 

    show : React.createClass({ 
     getInitialState: function(){ 
      return {message:'hi world'} 
     }, 
     render: function() { 
      return (
       <p>{this.state.message}</p> 
      ) 
     } 
    }) 
}; 

//render the component 
React.render(
    <reactTestjsx.hello.show/>, 
    document.querySelector('#content') 
); 
//call the init to auto switch the message 
reactTestjsx.hello.init(); 

Answer 1

我已经采取了你的代码和调整它只是一点点，以证明一个方法，使你的代码工作。

http://jsfiddle.net/wiredprairie/7o2sy3k5/

这里是我所做过的一切：

• 因为这将是通常使用的首字母为JavaScript的命名空间（和反应的组分），我做了改变。
• 我已经添加额外的命名空间Components并置于ShowMessage部件有
• 作为ReactJS是面向虚拟DOM和“差异”，我已经更新了randomMsgChange代码每次msg已被更新的时间来重新描绘的ShowMessage控制。
• 我已经从使用setState更改为仅使用普通属性，因为ShowMessage组件未修改要传递的属性的值。
• 当您使用JSX时，类似于：<ShowMessage msg="Yes!"/>的语法实际上正在创建一个名为ReactElement的类的包装器实例。该类负责创建您指定的类的实例（如ShowMessage）。因此，要更新ShowMessage实例的属性，您将重新提交ShowMessage。

代码：

//general js stuff 
var ReactTest = { 
    Toolbox: { 
     shuffle: function(o){ 
      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 
      return o; 
     } 
    } 
}; 

//JSX components 
var ReactTestJsx = ReactTestJsx || {}; 

ReactTestJsx.Hello = { 
    init: function(){ 
     ReactTestJsx.Hello.randomMsgChange(); 
    }, 

    renderComponent: function(msg) { 
     //render the component 
     React.render(
      <ReactTestJsx.Components.ShowMessage message={ msg } />, document.querySelector('#content') 
     );     
    }, 

    randomMsgChange: function(){ 
     setInterval(function(){ 
      var msg = ReactTest.Toolbox.shuffle([ 
       'hello world', 
       'hello solar system', 
       'hello universe' 
      ])[0]; 
      ReactTestJsx.Hello.renderComponent(msg); 
     },1000) 
    } 
}; 

ReactTestJsx.Components = { 
    ShowMessage : React.createClass({ 
     getDefaultProps: function() { 
      return { message: "hi world" }; 
     }, 
     render: function() { 
      return (
       <p>{this.props.message}</p> 
      ) 
     } 
    }) 
}; 

ReactTestJsx.Hello.renderComponent(); 
//call the init to auto switch the message 
ReactTestJsx.Hello.init();