无法呈现作为道具传递的 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 属性已经是元素，而不是您用来呈现元素的 class。

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

Answer 2

如果 ChipIcon 是一个 React 组件，你的第一个例子就会起作用。您的第二个示例有效，因为 chipIcon 是 React 元素，即已经呈现的组件。

您可以通过以下方式使用 jsx 语法实例化组件：<MyComponent /> 如果 MyComponent 是 React 组件。如果 MyComponent 已经是一个渲染组件，您可以使用语法 { MyComponent } 注入它，因为它已经是一个有效元素。但是使用渲染的 element 作为组件没有多大意义 class ：<MyComponent /> 实际上是 React.createElement(MyComponent, null).

无法呈现作为道具传递的 React 元素

Having trouble rendering a React element passed as a prop

javascript

reactjs

material-ui