基于react中的props渲染动态html元素

Question

我有一个组件，它接收一堆值作为 props，其中有一个带有字符串值的 prop，它定义了“要返回的输出 html”的类型。

像这样的东西，这当然是错误的

const WithScrollingText = ({text,boxWidth,tag}) => {
    return boxWidth > 100
    ?   <tag>{text}</tag>
    :   <div className="with-scrolling-text"><div>{text}</div></div>
}

我会像这样调用/使用这个组件：

<WithScrollingText text="Something" boxWidth={250} tag="span"/>
<WithScrollingText text="Something else" boxWidth={250} tag="div"/>

等等

如何修复渲染，以便当我将“span”发送到组件时，它会渲染并返回一个跨度

Answer 1

JSX 只是语法糖。巴别塔转变<div>Hello</div>为React.createElement("div", {}, "Hello").

\n\n

因此，为了拥有动态标签名称，您可以直接使用以下语法：

\n\n

const WithScrollingText = ({text, boxWidth, tag}) => {\n    return boxWidth > 100\n    ? React.createElement(tag, {}, text)\n    : <div className="with-scrolling-text"><div>{text}</div></div>\n}\n

\n\n

如果你想坚持使用 JSX 风格的标签，另一种方法就是简单地将 的值分配tag给首字母大写的变量\xe2\x80\x94，这告诉 React 将其作为变量进行计算，而不是将其视为变量字符串（就像 React 元素一样div）。

\n\n

const WithScrollingText = ({text, boxWidth, tag}) => {\n  const Tag = tag\n  return boxWidth > 100\n    ? <Tag>{text}</Tag>\n    : <div className="with-scrolling-text"><div>{text}</div></div>\n}\n

\n