javascript - 渲染作为 prop 传递的 React 元素时遇到问题

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 绝对是一个 Material UI SvgIcon，但当我尝试这样做时，我收到了警告。

arning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of 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 元素，为什么它不起作用？

Answer 1

您的icon property 已经是元素，而不是用于呈现元素的类。

在 JSX <ChipIcon />将转换为 React.createElement(ChipIcon, null) 。您的icon property 已经是创建的元素，而不是您传递给 React 来创建元素的类。