根据反应中的道具渲染动态 html 元素

Question

我有一个组件接收一堆值作为道具，其中一个道具带有一个字符串值，它定义了“输出 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"/>

等等

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

Answer 1

JSX 只是语法糖。 Babel 将<div>Hello</div>转换为React.createElement("div", {}, "Hello") 。

所以为了有一个动态的标签名，你可以直接使用这个语法：

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

如果你想坚持使用 JSX 风格的标签，另一种方法是简单地将tag的值分配给一个首字母大写的变量——这告诉 React 将它作为一个变量来评估，而不是把它当作一个字符串（比如它适用于 React 元素，例如div ）。

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