将点表示法与功能组件一起使用

Posted 2023-02-19

【中文标题】将点表示法与功能组件一起使用

【英文标题】：Using dot notation with functional component

【发布时间】：2020-07-07 23:50:06

【问题描述】：

ReactJs 官方文档建议在 dot notation 之后创建组件，例如 React-bootstrap 库：

<Card>
  <Card.Body>
    <Card.Title>Card Title</Card.Title>
    <Card.Text>
      Some quick example text to build on the card title and make up the bulk of
      the card's content.
    </Card.Text>
  </Card.Body>
</Card>

借助类组件很容易创建这种结构：

const CardBody = ( children ) => <div className='body'>children</div>;

class Card extends Component 
  static Body = CardBody;

  render() 
    return (
      <div className='card'>this.props.children</div>
    );
  

但也recommended尽可能多地使用功能组件。不幸的是，我不知道如何仅使用功能组件来实现这一点。

如果我关注this way，我将无法再将Card 用作组件，因为他现在是组件的对象：

const Card = 
  Component: CardComponent,
  Body: CardBody


export default Card

我必须这样使用它，而这并不是我真正想要的：

<Card.Component>
  <Card.Body>
  ...

你知道怎么做吗？

【问题讨论】：

人们往往会忘记 JS 中的 class 只是普通函数的语法糖。

【参考方案1】：

在函数组件中你可以这样做：

// Card.react.js
const Card = ( children ) => <>children</>;
const Body = () => <>Body</>;

Card.Body = Body;
export default Card;

// Usage
import Card from "./Card.react.js";

const App = () => (
  <Card>
    <Card.Body />
  </Card>
);

---

或者，您可以利用命名导出：

// Card.react.js
export const Wrapper = ( children ) => <>children</>;
export const Body = () => <>Body</>;

// Usage
import * as Card from "./Card.react.js";

const App = () => (
  <Card.Wrapper>
    <Card.Body />
  </Card.Wrapper>
);

【讨论】：

似乎与 javascript 配合得很好。但我正在使用打字稿，这给了我一个很好的错误：Property 'Body' does not exist on type 'FunctionComponent<>' 其中FunctionComponent 是Card 的类型，声明如下const Card: React.FunctionComponent = ...

@johannchopin 那是你应该问的另一个问题

是的，没错，我没有在问题中提到打字稿，所以我会问一个新的；）

对于看到这个问题并且无法在 TypeScript 中输入此代码的好奇者，您可以看看这个问题：***.com/questions/60883388/…

【参考方案2】：

对于功能组件

const CardBody = ( children ) => <div className='body'>children</div>;

const Card = (props) => (
  <div className='card'>props.children</div>
);
Card.Body = CardBody

然后像这样使用它

<Card>
  <Card.Body>
   ....

【讨论】：

感谢您的回答，这只是验证时间的问题，但我赞成您的回答：)