Question

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

当我控制日志图标时，它是正确的文本，但组件没有出现在页面上，我收到了每个组件标记的这两个警告：

"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个组件名称而不是使用我的地图功能中的Icon，那么一切都按预期工作。下面是我的帮助函数的代码：

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>
      );
    });
  }

我很茫然，不胜感激。谢谢。

Answer 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以支持原生地图方法）：

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

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

动态更改React组件标记

1 个答案: