如何創建容器組件以多次使用它？

Question

我有一個反應組件，我想填充另一個組件。 我希望能夠將這種smooth scroll組件用作容器，這樣我就可以在幾個不同的組件中使用它，並輕松地將它們與smooth scroll component的 html、css 和 js 一起使用。

平滑滾動組件：

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

             NEW COMPONENT'S CONTENT

            </div>
        </div>
    );
}

我想如何在另一個組件中使用它：

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

我怎樣才能意識到這種行為？

Answer 1

你可以使用 React 的children props

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

現在你將能夠使用像

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