动态改变 React 组件标签答案

【问题标题】：Dynamically changing React component tag动态改变 React 组件标签
【发布时间】：2018-03-22 16:35:49
【问题描述】：

我正在为一个项目创建一个登陆页面，并希望通过创建一个帮助函数来显示我的四个不同的纸张组件来减少我的代码。除了显示文件中的图标组件外，一切似乎都正常工作。

当我控制台记录图标时，它是正确的文本，但组件没有出现在页面上，并且我收到每个组件标签的以下两个警告：

"Warning: The tag <CardTravelIcon> is unrecognized in this browser. If you 
meant to render a React component, start its name with an uppercase letter."

和

"Warning: <CardTravelIcon /> is using uppercase HTML. Always use lowercase 
HTML tags in React."

如果我只是在 CardTravelIcon 或其他 3 个组件名称中的任何一个以该确切格式进行硬编码，而不是使用我的地图函数中的图标，一切都会按预期工作。下面是我的辅助函数的代码：

class Landing extends Component {
  renderPapers() {
    const classes = this.props.classes;
    return _.map(infoPapers, ({ description, Icon }) => {
      return (
        <Grid item xs={6} sm={3} key={Icon}>
          <Paper className={classes.paper}>
            <Icon className={classes.paperIcons} />
            {description}
          </Paper>
        </Grid>
      );
    });
  }

我很茫然，希望能得到任何帮助。谢谢。

【问题讨论】：

请您发布 this.props.classes 的输出吗？
我在我的网站设计中使用 Material UI，他们使用 this.props.classes 作为自定义样式的方式

标签： reactjs components jsx

【解决方案1】：

所以你想将组件作为变量传递，对吧？

假设你有这个最小的CardTravelIcon 组件：

const CardTravelIcon = ( props ) => (
    <div className={ props.className }>Card Travel Icon</div>
);

还有infoPapers这样的数据（Icon是对组件的引用）：

const infoPapers = [
{
    description: "Paper 1 description",
    Icon : CardTravelIcon
}];

您没有向我们展示 infoPapers 数据，但我怀疑您正在尝试将字符串作为组件传递，例如{ Icon : "<CardTravelIcon />" } 并期望它像设置 innerHTML（从字符串呈现 HTML）一样工作。在 React 中不是这样，需要先将 JSX 代码转译为对 React.CreateElement 的调用，而不是通过解析字符串来完成。

如果您传递对组件的引用，则所有内容都应该使用以下渲染方法进行渲染（注意：为了清楚起见，删除了 lodash 以支持本机 map 方法）：

class Landing extends React.Component {
  render() {
    return infoPapers.map(({ description, Icon }, idx) => {
      return (
        <div key={ idx }>
            <Icon />
            {description}
          </div>
      );
    });
  }
};

这是一个工作示例：https://jsfiddle.net/svygw338/

【讨论】：