Возникли проблемы рендеринг Реагировать элемент передается в качестве опоры

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: тип не должен иметь значение null, undefined, boolean или number. Он должен быть строкой (для элементов 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 является уже созданный элемент, а не класс, который вы передаете, чтобы создать для вас элемент.

Answer 2

Ваш первый пример будет работать, если ChipIcon был реактором Компонент. Ваш второй пример работает, потому что chipIcon является элементом React, то есть уже обработанным компонентом.

Вы можете создать экземпляр компонента с помощью синтаксиса jsx следующим образом: <MyComponent />, если MyComponent является компонентом React. Если MyComponent уже является визуализированным компонентом, вы вводите его с использованием синтаксиса { MyComponent }, поскольку он уже является допустимым элементом. Но не имеет смысла использовать созданный элемент как класс компонента: <MyComponent /> действительно React.createElement(MyComponent, null).