Question

在学习一些反应并尝试保持并关注结构（也看到我可以使用reactjs的地方）..我正在努力保持我知道的std JavaScript命名空间......

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

是否可以通过这种方式访问react render类？

//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组件）中对名称空间使用Title case是很常见的，我已经做出了这样的改变。
我为Components添加了一个额外的命名空间，并在那里放置了ShowMessage个组件
由于ReactJS是虚拟DOM而且＆＃34;差异＆＃34;我已更新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();

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

1 个答案: