苦労

Question

私は、次のコンポーネントがあります。

const Chip = (props) => { 
    const ChipIcon = props.icon; 
    let deleteButton = null; 

    if (!props.readOnly) { 
    deleteButton = <Delete 
     style={styles.deleteButton} 
     onTouchTap={props.onRemove} 
    /> 
    } 

    return <div className="Chip" style={styles.tag}> 
    <ChipIcon /> 
    {' ' + props.label + ' '} 
    {deleteButton} 
    </div> 
}; 

props.iconは間違い素材UI SvgIconですが、まだ私はこれをしようとすると私は警告を取得します。

arning：React.createElement：typeは、null、未定義、ブール値、または数値であってはなりません。これは文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。 Chipのレンダリング方法を確認してください。それは本当にだ場合

const Chip = (props) => { 
    const chipIcon = props.icon; 
    let deleteButton = null; 

    if (!props.readOnly) { 
    deleteButton = <Delete 
     style={styles.deleteButton} 
     onTouchTap={props.onRemove} 
    /> 
    } 

    return <div className="Chip" style={styles.tag}> 
    {chipIcon} 
    {' ' + props.label + ' '} 
    {deleteButton} 
    </div> 
}; 

なぜ最初の仕事は、要素が反応しない：

は、しかし、これは動作するようですか？

Answer 1

あなたのiconプロパティは既に要素であり、要素のレンダリングに使用するクラスではありません。

JSX <ChipIcon />では、React.createElement(ChipIcon, null)に変換されます。あなたのiconプロパティはです。すでに作成された要素であり、あなたが要素を作成するためにReactに渡すクラスではありません。

Answer 2

ChipIconが回答の場合のコンポーネントの場合、最初の例が有効です。 2番目の例は、chipIconがリアクトの要素です。つまり、既にレンダリングされたコンポーネントです。

<MyComponent />の場合は、MyComponentがReactコンポーネントの場合、jsx構文を使用してコンポーネントをインスタンス化できます。 MyComponentが既にレンダリングされたコンポーネントの場合は、有効な要素であるため、{ MyComponent }の構文を使用して挿入します。しかし、レンダリングされた要素をコンポーネントクラスとして使用することはあまり意味がありません。<MyComponent />は実際にはReact.createElement(MyComponent, null)です。