Question

我想将一个函数作为prop传递给一个组件并在其render函数中使用它，我似乎在这里缺少一个关键概念。

例如

index.jsx

render(<MyComponent d={data} showName = {d => d.name + ' ' + d.surname}/>, document.getElementById('app'));

MyComponent.jsx

class MyComponent extends React.Component {
    render() {
        return <h1>if (typeof this.props.showName === 'function') {
            //call this.props.showName(d)
        }
    }
}

修改

我希望showName prop是函数或值，组件不需要事先知道它。

EDIT2

第二个想法，我想我会构建一个组件，因此它可以同时使用函数和值作为道具，但是将它们分开以便我可以更好地验证它们。例如。我要么用

<MyComponent value="some value"/>

或

<MyComponent calculatedValue = {// a function}/>

Answer 1

像这样写：

checkMethod(){
    if(typeof(this.props.showName) === 'function') {
        //call this.props.showName(d);
        return null;
    }else{
        return this.props.showName;
    }    
}

class MyComponent extends React.Component {
    render() {
        return 
            <h1>
                {this.checkMethod()}
            </h1>
        }
    }
}

Answer 2

class MyComponent extends React.Component {
    render() {
        return <h1>if (typeof this.props.showName === 'function') {
            //call this.props.showName(d)
        }
    }
}

您的上述代码似乎没问题。但你的做法是错误的。

您需要使用propTypes验证道具

MyComponent .propTypes = {
showName : React.PropTypes.func
};

以下是其他检查，

propArray: React.PropTypes.array.isRequired,
   propBool: React.PropTypes.bool.isRequired,
   propFunc: React.PropTypes.func,
   propNumber: React.PropTypes.number,
   propString: React.PropTypes.string,
   propObject: React.PropTypes.object

自React v15.5起，React.PropTypes已移至另一个包中。请改用prop-types库。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Answer 3

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

你可以这样做，如果它不是一个功能，它会告诉你：

     MyComponent.propTypes = {
           showName: React.PropTypes.func.isRequired
     };

这是做出反应的方式;）

编辑：我现在得到它，你可以通过用一个参数调用它来对prop进行断言，如果断言失败，你就会知道它不是一个函数。在npm上查看此软件包，开箱即可轻松使用

https://www.npmjs.com/package/assert

Answer 4

如果您因任何原因不想使用propTypes，可以使用它，这是一个简单的JavaScript：

function isFunction(functionToCheck) {
 var getType = {};
 return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
}

source

Answer 5

你试过React.PropTypes.func吗？

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

Answer 6

我的组件需要检查this.props.update是否为函数。不知道这是否是正确的解决方案，但对于我来说绝对可以解决问题：

if ("update" in this.props) {
     this.props.update(data);
}

如何检查组件prop是否是React中的函数？

6 个答案: