2017-07-26 85 views
4

我如何驗證提供的道具是一個組件類(不是實例)?React propTypes組件類?

例如

export default class TimelineWithPicker extends React.PureComponent { 

    static propTypes = { 
     component: PropTypes.any, // <-- how can I validate that this is a component class (or stateless functional component)? 
    }; 

    render() { 
     return (
      <this.props.component {...this.props} start={this.state.start}/> 
     ); 
    } 
} 

回答

13

你要使用PropTypes.element。其實...... PropType.func適用於無狀態功能組件和類組件。

我已經制作了一個沙盒來證明這個工作原理......考慮到我一開始給你提供了錯誤的信息,這是需要的。非常抱歉!

加工sandbox example

這裏是在鏈接的情況下測試的代碼都死:

import React from 'react'; 
import { render } from 'react-dom'; 
import PropTypes from "prop-types"; 

class ClassComponent extends React.Component { 
    render() { 
    return <p>I'm a class component</p> 
    } 
} 

const FSComponent =() => (
    <p>I'm a functional stateless component</p> 
); 

const Test = ({ ClassComponent, FSComponent }) => (
    <div> 
    <ClassComponent /> 
    <FSComponent /> 
    </div> 
); 
Test.propTypes = { 
    ClassComponent: PropTypes.func.isRequired, 
    FSComponent: PropTypes.func.isRequired 
} 

render(<Test 
     ClassComponent={ ClassComponent } 
     FSComponent={ FSComponent } />, document.getElementById('root')); 
+1

也可以使用'oneOfType'爲不同的類型:'PropTypes.oneOfType([...])' – btzr

+0

這不是一個實例?我認爲''(又名'React.createElement(Foo,null)')是一個反應元素,而我想檢查原始'Foo'。 – mpen

+0

不能:)有一個單獨的PropType。 –

相關問題