Javascript 在React中，如何将标准html作为组件传递？

我想写一个接受包装器组件的HOC，但想像这样传递内部html的标准元素

type TextLike = string | {type,content}
const TextLikeRender = ({value,component:Wrapper})=>{
  return (
    value.type==='html'?
      <Wrapper dangerouslySetInnerHTML={{__html: value.content}}/>:
      <Wrapper>{value}</Wrapper>;
  )
}

// use like this
<TextLikeRender value={{type:'html',content:'This is <br/> Html'}} component={/* how to reference h1 element */XXXX.h1} />

---

我想将h1作为TextLikeRender的组件传递，如何引用h1？

一个可能的解决方案是在TextLikeRender中使用React.createElement。通过这种方式，您可以将组件作为字符串传递

export const TextLikeRender = ({ value, component:Wrapper })=> {
  return value && value.type==='html' ?
    React.createElement (Wrapper, { dangerouslySetInnerHTML: {__html: value.content} }) :
    React.createElement (Wrapper, {}, value && value.content)
}

用法

---

一种可能的解决方案是在TextLikeRender中使用React.createElement。通过这种方式，您可以将组件作为字符串传递

export const TextLikeRender = ({ value, component:Wrapper })=> {
  return value && value.type==='html' ?
    React.createElement (Wrapper, { dangerouslySetInnerHTML: {__html: value.content} }) :
    React.createElement (Wrapper, {}, value && value.content)
}

用法

---

除了三元表达式中多余的分号之外，代码中没有什么需要更改的。只需传递字符串h1作为组件属性的值

JSX只是调用React.createElement的语法糖。如果JSX标记以大写字母开头，它将保持原样并作为React.createElement的第一个参数传递，否则如果标记名称以小写字母开头，它将转换为字符串，然后作为第一个参数传递

功能测试组件{ 返回测试！； } 上述内容将转换为简单的JavaScript：

功能测试组件{ 返回React.createElementdiv，null，Testing！； } 当呈现上述示例TestComponent时，React.createElement将创建一个React元素，该元素呈现为“普通”元素

对于您的组件，无论在哪里使用JSX标记，包装器都将作为React.createElement的第一个参数传递。Wrapper的值可以是React组件，但也可以是字符串，例如div。因此，您需要做的就是像这样使用代码：

const TextLikeRender = ({ value, component: Wrapper }) => {
  if (value.type === "html") {
    return <Wrapper dangerouslySetInnerHTML={{__html: value.content}} />;
  } else {
    return <Wrapper>{value}</Wrapper>;
  }
}

<TextLikeRender value={{type: 'html', content: 'This is <br/> Html'}} component="h1" />

---

最后-这与问题无关，但是如果类型和值都是单独的道具，那么像这样的组件可能会更好，甚至更好的做法是不让TextLikeRender获取组件道具，并让使用它的代码包装它。而且，如果您可以将任何值作为道具传递，那么最好不要提及更安全和更安全的方法，完全避免危险的Html，并将[This is，Html]作为值传递，如果可能的话。

除了三元表达式中多余的分号之外，代码中没有什么需要更改的。只需传递字符串h1作为组件属性的值

JSX只是调用React.createElement的语法糖。如果JSX标记以大写字母开头，它将保持原样并作为React.createElement的第一个参数传递，否则如果标记名称以小写字母开头，它将转换为字符串，然后作为第一个参数传递

功能测试组件{ 返回测试！； } 上述内容将转换为简单的JavaScript：

功能测试组件{ 返回React.createElementdiv，null，Testing！； } 当呈现上述示例TestComponent时，React.createElement将创建一个React元素，该元素呈现为“普通”元素

对于您的组件，无论在哪里使用JSX标记，包装器都将作为React.createElement的第一个参数传递。Wrapper的值可以是React组件，但也可以是字符串，例如div。因此，您需要做的就是像这样使用代码：

const TextLikeRender = ({ value, component: Wrapper }) => {
  if (value.type === "html") {
    return <Wrapper dangerouslySetInnerHTML={{__html: value.content}} />;
  } else {
    return <Wrapper>{value}</Wrapper>;
  }
}

<TextLikeRender value={{type: 'html', content: 'This is <br/> Html'}} component="h1" />

---

最后-这与问题无关，但是如果类型和值都是单独的道具，那么像这样的组件可能会更好，甚至更好的做法是不让TextLikeRender获取组件道具，并让使用它的代码包装它。而且，如果您可以将任何值作为道具传递，那么最好不要提及更安全和更安全的方法，完全避免危险的Html，并将[This is，Html]作为值传递，如果可能的话。

您的代码段中有什么不起作用？@johnnypeter我想将h1传递给HOC，我不知道我怎么认为TextLikeRender不应该是自动关闭的，并且该组件应该容纳h1。在TextLikeRender中，只需将其作为this.props.children传递。所以h1将被TextLikeRender包装。这就是你所说的？你的代码片段中有什么不起作用？@JohnnTypeter我想把h1传递给HOC，我不知道我怎么认为TextLikeRender不应该是自动关闭的，并且该组件应该容纳h1。在TextLikeRender中，只需将其作为this.props.children传递。所以h1将被TextLikeRender包装。这就是你说的？