可以将React元素作为另一个组件的prop值传递给它来渲染它们吗？

Question

我在使用reactjs时有一个问题。

1. 声明一个变量（？），它在A类组件的Render部分中具有B组件。
2. 作为回报，将变量绑定到C组件的代理。
3. 在C组件中渲染。

->这样在reactjs中有问题吗？

class A extends Component{
 .....
 render() {
  const detail = (
    <B
      contents={[
         {
            title: <div style={{ wordBreak: 'keep-all' }}>foo</div>,
            child: (
              <div style={{ display: 'flex', alignItems: 'center' }}>
                <div style={{ marginRight: '-10px' }}>
            ....
      })
  )
  return(
    <C
      detailCompo={detail}
     />
  );
 }
}


// in C component

class C extends Component {
 ....
 render() {
  return(
   {this.props.detailCompo}
  );
 }
}