如何檢查組件prop是否是React中的函數？

我想將一個函數作爲一個道具傳遞給一個組件，並在其渲染函數中使用它，我似乎在這裏忽略了一個關鍵概念。如何檢查組件prop是否是React中的函數？

例如

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}/>

來源

2017-02-13 eagerMoose

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

你能做到這樣，如果它不是一個功能，它會告訴你：

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

這是反應的方式來做到這一點;）

編輯：我現在明白了，你可以通過調用一個參數對prop進行斷言，如果斷言失敗，你會知道它不是一個函數。檢查這個包在故宮，可以很容易地使用它的開箱

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

來源

2017-02-13 08:50:37

感謝。如果我的組件事先不知道該函數將被調用什麼（或者一個道具實際上是否是函數）呢？我試圖建立一個靈活的組件，我會編輯我的問題。 – eagerMoose

檢查我的編輯，斷言是更高級使用的關鍵 –

我想我會使用這種方法並修改我的邏輯一點。我將使用一個值或一個函數，並且以不同的方式命名道具（例如val，valFunc）並檢查傳遞的是什麼。謝謝！ – eagerMoose

你試過React.PropTypes.func？

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

來源

2017-02-13 08:48:36 Faalsh

我可以駕駛從遠離回答「您是否嘗試過」或「嘗試」，因爲它變得多了明確的答案評論的（它使你的迴應一定的不確定性） –

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

來源

2017-02-13 08:52:31 Ved

寫這樣的：

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> 
     } 
    } 
}

來源

2017-02-13 08:58:37

如果你不想使用propTypes出於任何原因，你可以使用這個，這是簡單的JavaScript：

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

source

來源

2017-02-13 09:02:11 ImSoFancy

如何檢查組件prop是否是React中的函數？

回答

相關問題