动态更改React组件标签

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

当我安慰日志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> 
    ); 
    }); 
    }

我很茫然，很感激任何帮助。谢谢。

来源

2017-10-11 Alex S

请问您可以发布this.props.classes的输出吗？ –

我为我的网站设计使用材质用户界面，他们使用this.props.classes作为定制样式的方式 –

所以你想传递一个组件作为一个变量，对不对？

比方说，你有这个最小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/

来源

2017-10-18 11:36:39 pawel

动态更改React组件标签

回答

相关问题