Question

我想创建一个简单的React组件，将给定的HTML内容包装到一个标记中，该标记用作显示内容的上下文。

function Content(content) {
   return <div>{content}</div>;
}

<Content>
   <span>Hey!</span>
</Content>

我做错了什么？

Answer 1

function Content(props) {
  return <div>{props.children}</div>;
}

使用ES6语法：

const Content = ({ children }) => <div>{children}</div>

Answer 2

包装给定HTML内容的简单React组件。

var content = "<Content><span>Hey!</span></Content>"


function Content() {
 return (
     <div className="content" dangerouslySetInnerHTML={{__html: 
     content}}>
     </div>
   );
}

如何将HTML内容传递给无状态反应组件？

2 个答案: