Question

如果我使用状态，我正在尝试了解如何发送新变量。

这是React教程的例子：

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>
    );
  }
});

React.render(<Timer />, mountNode);

有效。但如果我想发送secondsElapsed我该怎么办？

<Timer sec={this.props.sec}>和

getInitialState: function() {
    return {secondsElapsed: this.props.sec};
  }

它不起作用。

JSFIDDLE - 我应该从10000秒开始计时器。

Answer 1

查看componentWillMount（http://facebook.github.io/react/docs/component-specs.html）

如果你在componentWillMount中调用setState，你可以保证它在点击渲染之前会被更新。

Answer 2

下面的code按预期工作。除了确保initialTime属性始终存在默认值之外，您还可以在secondsElapsed内初始化getInitialState状态。虽然这样做可以被认为是anti-pattern，但在这种情况下，它不仅仅是内部状态的初始化。

此外，您还需要实施componentWillReceiveProps。当组件的道具更新时，调用此函数（在第一次之后）。在这种情况下，initialTime属性值最初为10，然后更改为10000。因此，nextProps参数将包含一个对象，其属性initialTime设置为10000。

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

如果您将字符串传递给initialTime，如上所示，请确保在值上使用parseInt：

return { secondsElapsed: parseInt(this.props.initialTime || '0') };

详细了解组件生命周期here。

在州发送道具 - React

2 个答案: