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

Question

在学习一些 reactjs 并尝试保持和关注结构（也看看我可以在哪里使用 reactjs）。我正在努力保持我知道的标准 JavaScript 命名空间...

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

是否可以通过这种方式访问 class 呈现的反应？

//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（以及 React 组件）中对名称空间使用标题大小写很常见，因此我进行了更改。
我为 Components 添加了一个额外的命名空间，并在那里放置了 ShowMessage 组件
由于 ReactJS 是虚拟的 DOM 和 "diff" 导向的，我更新了 randomMsgChange 代码以在每次 msg 时重新呈现 ShowMessage 控件已更新。
我已经从使用 setState 更改为仅使用普通属性，因为 ShowMessage 组件不会修改传递的属性的值。
当你使用 JSX 时，像这样的语法：<ShowMessage msg="Yes!"/> 实际上是在创建一个名为 ReactElement 的 class 的包装器实例。 class 负责创建您指定的 class 的实例（例如 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();

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

Altering the state of a ReactJS class after render from an outside function

javascript

reactjs

react-jsx