Возникли проблемы с визуализацией элемента React, переданного в качестве реквизита

У меня есть следующий компонент:

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 определенно представляет собой Material UI SvgIcon, но я получаю предупреждения, когда пытаюсь это сделать.

Внимание: React.createElement: тип не должен быть нулевым, неопределенным, логическим или числовым. Это должна быть строка (для элементов 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>
};

Почему первый не работает, если это действительно элемент React?


reactjs javascript material-ui
person ffxsam    schedule 14.04.2016    source источник
comment
Вы пытались заключать возвращаемое значение в скобки? Может быть, что-то идет не так, поскольку JS считает, что оператор return завершен после первой строки?   -  person Nick    schedule 15.04.2016

Ответы (2)


arrow_upward
1
arrow_downward

Ваше свойство icon уже является элементом, а не классом, который вы используете для рендеринга элемента.

В JSX <ChipIcon /> будет преобразовано в React.createElement(ChipIcon, null). Ваше свойство icon — это уже созданный элемент, а не класс, который вы передаете React, чтобы создать элемент для вас.

person Buzinas    schedule 14.04.2016

arrow_upward
0
arrow_downward

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

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

person VonD    schedule 14.04.2016