1基本使用

这里的组合继承类似与vue中的插槽，子组件的内容由父组件来决定。
子组件

import React, { FC } from "react"
const Splitpane:FC=(props)=>{
    return <div style={{backgroundColor:"red"}}>
    {props.children}
    </div>
}
export default Splitpane

父组件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Splitpane from "@/components/splitpane"
ReactDOM.render(
<Splitpane><div>这是split的子元素</div></Splitpane>,
  document.getElementById('root')
);
serviceWorker.unregister();

2.定义左右两边内容

在父组件中定义left与right两个变量，变量分别对应左右两块内容，在子组件的props中进行接收

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Splitpane from "@/components/splitpane"
ReactDOM.render(
<Splitpane left={<div>左边内容</div>} right={<div>有那边内容</div>}><div >这是split的子元素</div></Splitpane>,
  document.getElementById('root')
);
serviceWorker.unregister();

import React, { FC } from "react";
//定义左右两块的类型
type IProps = {
  left: JSX.Element;
  right: JSX.Element;
};
const Splitpane: FC<IProps> = (props) => {
  return <div style={{ backgroundColor: "red" }}>
      <div style={{float:"left"}}>{props.left}</div>
      <div style={{float:"right"}}>{props.right}</div>
      {props.children}</div>;
};
export default Splitpane;