Probleme ein Element als Stütze geführt React Rendering

Question

Ich habe die folgende Komponente:

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 ist definitiv ein Werkstoff UI SvgIcon, aber ich erhalte Warnungen, wenn ich das versuchen.

arning: React.createElement: type sollte nicht null, undefined, Boolean oder Zahl sein. Es sollte eine Zeichenfolge (für DOM-Elemente) oder eine ReactClass (für zusammengesetzte Komponenten) sein. Überprüfen Sie die Rendermethode Chip.

Aber das scheint zu funktionieren:

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

Warum nicht die erste Arbeit, wenn es wirklich ein Element Reagieren ist?

Answer 1

Ihre icon-Eigenschaft ist bereits das Element und nicht die Klasse, die Sie zum Rendern des Elements verwenden.

In JSX würde <ChipIcon /> in React.createElement(ChipIcon, null) umgewandelt werden. Ihre icon Eigenschaft ist bereits das erstellte Element, nicht die Klasse, die Sie an Reagieren übergeben, um das Element für Sie zu erstellen.

Answer 2

Ihr erstes Beispiel würde funktionieren, wenn ChipIcon eine React Komponente wäre. Ihr zweites Beispiel funktioniert, weil chipIcon ein React Element ist, d. H. Bereits gerenderte Komponente.

Sie können eine Komponente mithilfe der jsx-Syntax auf diese Weise instanziieren: <MyComponent />, wenn MyComponent eine React-Komponente ist. Wenn MyComponent bereits eine gerenderte Komponente ist, injizieren Sie es mit der Syntax { MyComponent }, da es bereits ein gültiges Element ist. Aber es macht nicht viel Sinn, ein gerendertes Element als eine Komponentenklasse zu verwenden: <MyComponent /> ist wirklich React.createElement(MyComponent, null).