您可以使用this.props.children渲染组件包含的任何子项：

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

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

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

运行时包装器：

这是最地道的方式。

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 中的“特殊props”，上面的示例是语法糖并且（几乎）等效于<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 提前一步缩短渲染，而在运行时包装器的情况下，children prop 可能总是不同的 ReactElement 并导致重新渲染即使您的组件扩展了 PureComponent。

请注意，connectRedux 曾经是运行时包装器，但已更改为 HOC，因为如果您使用该pure选项，它可以避免无用的重新渲染（默认情况下为 true）

你永远不应该在渲染阶段调用 HOC，因为创建 React 组件可能很昂贵。您应该在初始化时调用这些包装器。

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

更多解释在这里：https : //stackoverflow.com/a/31564812/82609

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

您可以将其作为普通props传递： foo={<ComponentOne />}

例如：

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

Facebook 推荐使用无状态组件 来源：https : //facebook.github.io/react/docs/reusable-components.html

在理想的世界中，您的大多数组件都是无状态函数，因为将来我们还可以通过避免不必要的检查和内存分配来针对这些组件进行性能优化。如果可能，这是推荐的模式。

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);