使用带功能组件的点表示法

IT技术 javascript reactjs

2021-04-03 18:02:37

官方 ReactJs 文档建议按照点符号创建组件，如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>
    );
  }
}

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

如果我按照这种方式，我就不能再Card用作组件了，因为他现在是组件的对象：

const Card = {
  Component: CardComponent,
  Body: CardBody
}

export default Card

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

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

你知道怎么做吗？

2个回答

在功能组件中，您可以这样做：

// 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>
);

是的，这是真的，我没有在问题中提到typescript，所以我会问一个新的；）

2021-06-03 18:02:37

似乎适用于 javascript。但是我正在使用typescript，这个给了我一个很好的错误：像这样声明的类型Property 'Body' does not exist on type 'FunctionComponent<{}>'在哪里FunctionComponentCardconst Card: React.FunctionComponent = ...

2021-06-09 18:02:37

对于看到这个问题并且在 TypeScript 中输入这个代码有困难的好奇的人，你可以看看这个问题：stackoverflow.com/questions/60883388/...

2021-06-16 18:02:37

@johanchopin 那是一个你应该问的不同问题

2021-06-18 18:02:37

对于功能组件

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

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

然后像这样使用它

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

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

2021-06-14 18:02:37

其它你可能感兴趣的问题

上一篇React 子组件的 onChange 事件以更新状态下一篇使用react的会话超时警告模式