Question

我从React开始，似乎props只接受值而不接受函数？我尝试这样做时收到错误：

var Hello = React.createClass({
    render: function() {
        return (
            <div>
                hey there! {this.props.x}
            </div>
        );
    },
    calcul: function(a, b){
        return a*b
    }
});

React.render(
    <Hello x={this.calcul(5, 6)}/>,
    document.getElementById('content')
)

我得到了这个Uncaught TypeError: this.calcul is not a function

但是当我使用x={this.calcul}时，它会无声地失败。

Answer 1

this.calcul不存在，因为在这种情况下this绑定到全局上下文。如果您想将calcul的结果作为道具传递：

function calcul(a, b) {
  return a*b;
}

var Hello = React.createClass({
  render: function() {
    return (
      <div>
          hey there! {this.props.x}
      </div>
    );
  },
  calcul: calcul
});

React.render(
  <Hello x={calcul(5, 6)} />,
  document.getElementById('content')
);

所以这里30将作为prop x传递，您的组件将具有calcul函数。

Answer 2

我认为＆＃34; React＆＃34;方式可能是这样的

  var Calculator = React.createClass({
    render: function() {
        return (
            <div>
                hey there! {this.calcul(this.props.x, this.props.y)}
            </div>
        );
    },
    calcul: function(a, b){
        return a*b;
    }
});

React.render(
    <Calculator x={5} y={6}/>,
    document.getElementById('content')
);

但是有很多方法可以做到这一点。

无法将功能传递给道具

2 个答案: