你可以通过传入一个组件。道具和渲染它与插值。

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

然后你将传入一个名为child的道具，它将是一个React组件。

让我们创建一个包装器组件:

export const Wrapper = (props) => {
    return(<>
        <Menu />
        {props.children}
        <Footer />
        </>
    )
}

现在可以将新结构包含到现有结构中。 你需要将组件包含在一个路由中，例如:

 <Route path="/"  element={<Wrapper><ExampleComponent /></Wrapper>} />

注意，我在这里提供了一个更深入的答案

运行时包装:

这是最地道的方式。

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

注意，children是React中的“特殊道具”，上面的例子是语法糖，(几乎)相当于<Wrapper children={<App/>}/>

初始化包装器/ HOC

您可以使用高阶组件(HOC)。它们最近被添加到官方文档中。

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

这可能会带来(一点点)更好的性能，因为包装器组件可以通过shouldComponentUpdate提前一步短路呈现，而在运行时包装器的情况下，子道具可能总是不同的ReactElement，并导致重新呈现，即使您的组件扩展了PureComponent。

请注意，Redux的connect曾经是一个运行时包装器，但被更改为HOC，因为如果您使用pure选项(默认为true)，它允许避免无用的重新渲染。

你不应该在渲染阶段调用HOC，因为创建React组件的开销很大。您应该在初始化时调用这些包装器。

请注意，当使用上述功能组件时，HOC版本不提供任何有用的优化，因为无状态功能组件不实现shouldComponentUpdate

更多解释请访问:https://stackoverflow.com/a/31564812/82609

虽然有点晚了，但这里有一个强大的HOC模式，可以通过将组件作为道具来覆盖组件。它简单而优雅。

假设MyComponent呈现了一个虚构的a组件，但您希望允许自定义重写a，在本例中为B，它将a包装在<div>…</div>，并将“!”附加到文本道具:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

你可以使用this.props.children来呈现组件包含的任何子元素:

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

export default () => <Wrap><h1>Hello word</h1></Wrap>

您可以将组件作为道具传递，并使用与使用组件相同的方式。

function General(props) {
    ...
    return (<props.substitute a={A} b={B} />);
}

function SpecificA(props) { ... }
function SpecificB(props) { ... }

<General substitute=SpecificA />
<General substitute=SpecificB />