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

Question

我想编写一个接受包装器组件的 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？

标签： javascriptreactjsnext.js

Answer 1

一种可能的解决方案是使用React.createElementinside TextLikeRender。这样您就可以将组件作为字符串传递。

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 value={{type:'html',content:'This is <br/> Html'}} component='h1' />

演示在这里