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绝对是一个重要的用户界面SvgIcon，但是当我尝试这个时，我会收到警告。

arning：React.createElement：type不应为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>
};

如果它真的是一个React元素，为什么第一个工作没有？

Answer 1

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

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

Answer 2

如果ChipIcon是React 组件，那么您的第一个示例将有效。您的第二个示例有效，因为chipIcon是一个React 元素，即已经呈现的组件。

您可以使用jsx语法以这种方式实例化组件：<MyComponent />如果MyComponent是React组件。如果MyComponent已经是渲染组件，则使用语法{ MyComponent }将其注入，因为它已经是有效元素。但将渲染的元素用作组件类是没有多大意义的：<MyComponent />确实是React.createElement(MyComponent, null)。

无法渲染作为道具传递的React元素

2 个答案: