Reactjs如何将字符串转换为[object Object]

Question

我有一个menuItem组件，其道具是由我创建的图标组件，名为FontIcon。

在menuItem道具中，您可以将图标的名称作为字符串传递，例如：leftIcon="face"，但您也可以为此组件传递代码：leftIcon='<FontIcon style={{color:"red"}} className="face" />'。

在第一种情况下，所有工作都很完美，道具被传递给变量，其中是组件的代码：

leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;

但第二种方式不起作用。当用户传递所有代码时，我需要为此添加一些内容（此大小值如上所述），此时此添加有效：

leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");

我已经if检查用户通过的内容：

if (_props.leftIcon.match(/<.+\/>/)) {
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");
} else {
    leftIcon = <FontIcon size={_props.fontSize} className={_props.leftIcon} />;
}

但是在第二种方式中，我得到一个字符串，它不起作用。没有图标，但是有一个包含代码的字符串：

所以我安慰了这个，这就是我得到的：

typeof首先是对象，但第二个是字符串。

那么第二种方式可以做些什么呢？

Answer 1

如果此代码在渲染部分中，则应该有效;

if (_props.leftIcon.match(/<.+\/>/)) {
    leftIcon = _props.leftIcon.replace(/\/>$/, " size={_props.fontSize}/>");
} else {
    leftIcon = (<FontIcon size={_props.fontSize} className={_props.leftIcon} />);
}

请注意括号。

Answer 2

有一种从字符串创建组件的方法，您可以查看this answer

但是我建议你将样式和/或类名称以及其他参数传递给组件，而不是字符串，然后你就可以了：

 return <FontIcon class={condition ? 'firstClass' : 'secondClass'} ... />;