如何创建容器组件以多次使用它？

Question

I have a react component I want to fill inside of another component . I want to be able to use this smooth scroll component kind of as a container, that way I could use it inside of several different components and easily enclose them with the smooth scroll component 's html, css and js.

Smooth scroll component:

render() {
    return (
        <div className="smooth-scroll-viewport">
            <div className="smooth-scroll-container">

             NEW COMPONENT'S CONTENT

            </div>
        </div>
    );
}

How I want to use it inside of another component:

<SmoothScroll>
   <div className="some-content">
      test
   </div>
</SmoothScroll>

How can I realize such behavior?

Answer 1

you can use children props from React

render() {
    return (
        <div className="smooth-scroll-viewport">
            <div className="smooth-scroll-container">
              {this.props.children}
            </div>
        </div>
    );
}

Now you will be able to use like

<SmoothScroll>
   <div className="some-content">
      test
   </div>
</SmoothScroll>