Question

我正在学习ReactJS，需要在同一个组件中传递一个变量。

这是一个例子

var DataBase = [
    {
        position: 1
    },
    {
        position: 2
    },
    {
        position: 3
    },
    {
        position: 4
    }
];

var Component = React.createClass({

    getDefaultProps: function() {
        var counter = 0;
    },

    componentDidMount: function() {
        var dbPos = this.props.db[counter+1].position;
        return dbPos;
    }, 

    render: function () {
         return (
            <div className="Component">
                {this.dbPos}
            </div>
         ); 
    }
});

ReactDOM.render(
    <Component db={DataBase} />,
    document.getElementById('main')
);

所以，这显然不起作用。我需要的是将var dbPos中创建的componentDidMount传递给render（没有像onClick这样的任何事件）。这将是时间驱动的，例如每个位置使用setTimeout（）10秒。

这可能吗？怎么样？有更好的解决方案吗？我很感激你的帮助。

Answer 1

该问题可能涉及状态处理。在React应用程序中有多种方法可以处理应用程序的状态，但我会假设您有兴趣将dbPos作为组件状态的一部分（并且您将来可能会对其进行变更）。要实现此目的，只需使用this.setState和this.state。

在我展示示例之前，我将在您的代码段中说明其他一些错误：

getDefaultProps应返回props的哈希对象，而不是用var声明它们（这会使它们作用于方法而不是组件实例）
counter，作为道具，必须称为this.props.counter。请注意，counter不是此组件状态的一部分，并且只能在组件树的较高级别中对该prop的相应更改进行更改。

考虑到这一点：

var Component = React.createClass({

    getDefaultProps: function() {
        return {counter: 0};
    },

    componentDidMount: function() {
        var dbPos = this.props.db[this.props.counter+1].position;
        this.setState({ // change the state of this component
          dbPos: dbPos
        })
    },

    render: function () {
         return (
            <div className="Component">
                {this.state.dbPos}
            </div>
         ); 
    }
});

如果您不希望dbPos作为组件状态的一部分进行变异，只需创建一个新方法来检索预期的position。这里不会涉及可变状态。

var Component = React.createClass({

  getDefaultProps() {
    return {counter: 0};
  },

  componentDidMount() {
    // no longer needed
  },    
  getPosition() {
    return this.props.db[this.props.counter + 1].position;
  },

  render () {
    return (
        <div className="Component">
            {this.getPosition()}
        </div>
      ); 
  }
});

在react类中：如何在同一组件内传递变量

1 个答案: