如何将大量HTML内容传递到无状态的React组件中？

Question

I want to make a simple React component that wraps the given HTML content into a tag that serves as a context in which the content is displayed.

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

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

What am i doing wrong?

Answer 1

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

Using ES6 syntax:

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

Answer 2

Simple React component that wraps the given HTML content.

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


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