渲染作为道具传递的 React 元素时遇到问题答案

【问题标题】：Having trouble rendering a React element passed as a prop渲染作为道具传递的 React 元素时遇到问题
【发布时间】：2016-04-14 21:06:50
【问题描述】：

我有以下组件：

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：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 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 元素，为什么它不起作用？

【问题讨论】：

您是否尝试过在返回值周围加上括号？可能是哪里出了问题，因为 JS 认为 return 语句在第一行之后就完成了？

标签： javascript reactjs material-ui

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果ChipIcon 是一个 React 组件，你的第一个例子就可以工作。您的第二个示例有效，因为 chipIcon 是一个 React 元素，即已经渲染的组件。

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

【讨论】：