Question

我真正的应用程序是使用react创建一个firefox插件，在无DOM范围内维护一个对象/状态，然后将一个元素呈现给当前活动的浏览器窗口。存在多个浏览器窗口。

所以作为一个小实验，看看反应是否可以做到这一点，我在反应主站点上乱搞了Timer示例。

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

var rendered = ReactDOM.render(<Timer />, mountNode);
// i hope to do something here to render it to another node

是否可以将相同的计时器渲染到多个节点？状态应该是相同的，如果我修改该单个对象中的状态，它应该影响两者。这可能吗？

谢谢！

Answer 1

我实际上尝试了另一种方法。我使用带有回调数组的单例对象作为属性。此回调数组存储所有已挂载的元素的innerMethods，这些元素对应于特定事件。

理想情况下，您应该拥有一个键值对 event =＆gt; [所有要开火的功能]

但是对于这个例子，我去了一个相当原始的场景，那里只有一个事件。所以它只是该事件的一系列调用回调（doSomething）。

http://codepen.io/bhargav175/pen/rxNRxO

的MyStore

let MyStore = {
     doSomething : function(v){
            MyStore.callbacks.forEach((callback)=>{
                 callback(v);
         });
     },
     callbacks :[],
     addSomethingListener : function(callback){
          MyStore.callbacks.push(callback);
     }
}

每次安装组件时都会这样做，

componentDidMount(props){
     MyStore.addSomethingListener(this.doStuff.bind(this));

  }

将每个元素的回调添加到Store，并在事件发生时触发每个元素。

完整代码。

let MyStore = {
     doSomething : function(v){
            MyStore.callbacks.forEach((callback)=>{
                 callback(v);
         });
     },
     callbacks :[],
     addSomethingListener : function(callback){
          MyStore.callbacks.push(callback);
     }
}

/*
 * A simple React component
 */
class Application extends React.Component {
  constructor(props){
    super(props);
     this.state = {'some_prop':0};
  }
  doStuff(val){
     this.setState({
         'some_prop':val
     });
  }
  componentDidMount(props){
     MyStore.addSomethingListener(this.doStuff.bind(this));
  }
  render() {
    return <div>
      <h1>Hello, ES6 and React 0.13!</h1>
      <p>
       {this.state.some_prop}
      </p>
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

React.render(<Application />, document.getElementById('yetanotherapp'));



MyStore.doSomething(5);
MyStore.doSomething(15);
MyStore.doSomething(25);

因此，如果您看到，我将触发doSomething事件，并且所有组件都在不同的安装节点上更新。在您的情况下，您可以将tick逻辑移动到doSomething中。刚开始。希望这有所帮助。

React，多次渲染单个状态/对象

1 个答案: