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

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

本文关键字：ReactJS 状态 函数 从外部      更新时间：2023-09-26

在学习一些reactjs并努力保持和关注结构（同时看看我可以用reactjss去哪里）时。。我正在努力保持我所知道的标准JavaScript名称空间。。。

我有以下内容，它完美地呈现了初始消息，但是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 case是很常见的，所以我已经做出了更改
  • 我为Components添加了一个额外的命名空间，并在其中放置了ShowMessage组件
  • 由于ReactJS是虚拟DOM，并且面向"diff"，所以我更新了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();
相关文章：