如何在 JSX 中定义函数

Question

我是 React 的新手，我想做的是定期生成几个数字并更新视图：

<script type="text/jsx">
      var ChartFrame = React.createClass({
        datagenerator: function(n, itvl){
          function randomD(){
            data2fill = [];
            for(var i=0; i<n; i++){
              data.push(Math.random()*10);
            }
            this.setState({
              "data": data
            });
          }
          var counter = setInterval(randomD, itvl);
          return counter;
        },
        getInitialState: function(){
          return {
            data:(function(){  
              this.state.counter = this.datagenerator(5, 1000); 
              return [];  
            })()
          }
        },
        render:  function(){
          var ds = this.state.data;
          var divs = ds.map(function(d, i){
            return <div>   d   </div>;
          });
          return (
            {divs}
          );
        }
      });
      React.render(<ChartFrame />, document.body);
<script>

但是，我收到以下错误消息：

未捕获类型错误：this.datagenerator 不是函数

我想知道在 JSX 中定义函数的正确方法是什么？

Answer 1

你声明函数的方式是正确的，但你的整个 getInitialState 都搞砸了，哟。

这里期望的行为是什么？由于您已经声明了一个新函数，它将无法访问正确的 this 组件，除非您 .bind() 它。不确定它的作用或工作原理，请阅读 this great article。代码如下

return {
    data:(function(){  
        this.state.counter = this.datagenerator(5, 1000); 
        return [];  
    }.bind(this))()
}

但是这样做会给您带来另一个错误，this.state 是 undefined 因此您将无法在 this.state 上设置 counter。

this.state 永远不会在 getInitialState 中设置，因为函数的工作是产生状态。此外，您将向数据返回一个空数组，这将导致 this.state.data 成为一个空数组。

此外，您可能希望在生命周期方法 #componentDidMount 中启动 datagenerator 函数，以便设置状态并进行第一次渲染。

作为免费款待，your code in action！

如何在 JSX 中定义函数

How to define function in JSX

reactjs

react-jsx