Question

var React = require('react');

var SomeComponent = React.createClass({
componentWillMount: function() {
    someVariable = "Variable";
    return someVariable
},
    render: function() {
        return (
            <div>{someVariable}</div>
        );
    }

});

module.exports = SomeComponent;

组件如何从componentWillMount中检索someVariable？

Answer 1

您的示例有效，因为您正在定义{em>全局变量，render方法随后可以访问该变量。这通常很糟糕。我认为你真正想要的是在组件的初始状态下设置这个变量。

var SomeComponent = React.createClass({
   getInitialState: function () {
      return {someVariable: 'Variable'};
   },
   render: function () {
      return <div>{this.state.someVariable}</div>
   }
});

在this.setState内使用componentWillMount设置状态也很好但是会覆盖组件的任何初始状态，因为渲染仍然只会执行一次，因此在{{1}内更有意义如果它应该是组件本地的东西。

Answer 2

典型模式是通过setState使用状态。但是如果你需要设置一些东西，那么最好将它作为一个属性传递给它。另一种选择是添加getInitialState（尽管documentation suggests this is an anti-pattern）。

如果你想在componentWillMount中这样做，我会试试这个：

var SomeComponent = React.createClass({
  componentWillMount: function() {
    var someVariable = "Variable";
    this.setState({someVariable: someVariable});
  },

  render: function() {
    return <div>{this.state.someVariable}</div>;
  }
});

它会起作用，但它可能会生成关于在生命周期事件中使用setState的警告，这是一种不好的做法（我更喜欢使用getInitialState对于此特定实例，componentWillMount。

ReactJs组件如何从componentWillMount中检索var？

2 个答案: