为什么写成普通函数的组件会返回空

multipleHoles 用 Layout 中的 console.log 检查，肯定是连通的。示例取自 facebook 教程 react composition-vs-inheritance 此处的工作示例：skunshd.github.io/react-test-example/ 此处的源代码： https ://github.com/SkunSHD/react-quick-start-examples

export function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

export function Contacts() {
  return <div className="Contacts" />;
}

export function Chat() {
  return <div className="Chat" />;
}


import { SplitPane, Contacts, Chat } from './multipleHoles/SplitPane'

export default function multipleHoles() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

import multipleHoles from './multipleHoles'

export default class Layout extends React.Component {

  render() {
    return(
       <div>

        <WelcomeDialog />
        <multipleHoles />

      </div>
    );
  }
}

import Layout from './components/Layout'

ReactDOM.render(
  <Layout />,
  document.getElementById('root')
);

（我故意删除了组件的进口）