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"/>

以此类推

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

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

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

1 个答案: