React:如何实现Component.SubComponent

Question

我看到了一些这样的示例代码：

import React from 'react'
import MyComp from 'my-comp'

const MySubComp = MyComp.MySubComp

class Page extends React.Component {
  render() {
    return (
      <MyComp>
        <MySubComp/>
      </MyComp>
      )
  }
}

如何实现语法MyComp.MySubComp

它有术语吗？

Answer 1

在您的示例中，MySubComp是MyComp的静态类成员，您可以这样轻松地实现它：

export default class MyComp extends Component {
   // ...
}

MyComp.MySubComp = class MySubComp extends Component {
   // ...
}

Answer 2

类似于Freez的回答，对于功能组件，您可以将子组件附加到其中，如下所示：

export default function MyComp(props) {
    return (
        <div>Main component</div>
    );
}

MyComp.MySubComp = function MySubComp(props) {
    return (
        <div>Sub component</div>
    );
}

// Alternative way
MyComp.MySubComp = (props) => <div>Sub component</div>

它们可以以这种方式消费：

<MyComp>
    <MyComp.MySubComp />
</MyComp>

注意:第一种方法重复组件的名称。对此的解释是，第一个名称是附加的另一个函数的子名称，第二个名称是实际组件的名称，它将显示在React工具中。没有它，开发工具将只显示“匿名”。