2017-07-26 10 views
4

提供されている小道具が(インスタンスではなく)コンポーネントクラスであることをどのように検証できますか?propype型のコンポーネントクラスに反応しますか?

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があります。 –

関連する問題