这样的react组件怎么写？

Question

我想实现这种

 class Baseframe extends React.Component<BaseframeProp, {}> {
    render(){
       return(
         <div>
          *** 需要渲染的子组件 ***
         <div>
       )
    }
 }

然后在最外层能够这样写:

    render() {
        return (
          <Baseframe>
              JSXElement
          </Baseframe>
        )
    }

就是把组件写成这种可以有结束标签的这种，怎么写？

Answer 1

可以这么写：

class Baseframe extends React.Component {
    render(){
       return(
         <div>
           {this.props.children}
         <div>
       )
    }
 }

Answer 2

本来就可以这样写

外面传进来的JSXElement可以用props.children获得

Answer 3

本身就可以这么写啊，建议楼主再熟悉下react官方教程

Answer 4

一般可直接使用 this.props.children。

如果需要定位到多个分散的地方，比如：

<base-comp>
  <title>/* title here*/</title>
  /* other static information*/
  <content>/* main-content*/</content>
<base-comp>

则需要使用slot。