javascript - 从外部函数渲染后更改ReactJS类的状态

在学习一些reactjs并尝试保持和关注结构（也看到我可以使用reactjs的地方）。

我有以下代码可以完美地呈现初始消息，但是reactTestjsx.hello.randomMsgChange();在尝试设置已经创建的react类的状态时抛出错误。

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

//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();

最佳答案

我已经使用了您的代码并对其进行了一些重组，以演示使代码工作的一种方法。

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

这是我所做的事情：


因为在JavaScript（和React组件）的名称空间中使用Title大小写是很常见的，所以我进行了更改。
我为Components添加了另一个名称空间，并在其中放置了ShowMessage组件
由于ReactJS是虚拟DOM且面向“ diff”，因此，我已经更新了randomMsgChange代码，以在每次更新ShowMessage时重新呈现msg控件。
我已经从使用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();