克隆并重命名组件

Question

我有一个经常使用的组件-<Box />。

我想将其重命名以在代码中声明其功能含义，如下所示：

import Box from '../reusable-components/Box'

const Wrapper = Box
const Card = Box
const TopSection = Box

// Or like this?
// const [Wrapper, Card, TopSection] = cloneComponent(Box)

function MyComponent() {
  return (
    <Wrapper>
      <TopSection style={{display: 'flex'}}>
        <Card>Item A</Card>
        <Card>Item B</Card>
        <Card>Item C</Card>
      </TopSection>
    </Wrapper>
  )
}

Answer 1

如果它是一个react组件，则没有意义“克隆”它。因为当您在中使用它时，它将创建一个新实例。实际上，我不清楚您为什么需要全部重命名，但是这是您可以执行的操作

import Wrapper from '../reusable-components/Box'
import Card from '../reusable-components/Box'
import TopSection from '../reusable-components/Box'
//Or
 const [Wrapper, Card, TopSection] = [Box,Box,Box]

function MyComponent() {
  return (
    <Wrapper>
      <TopSection style={{display: 'flex'}}>
        <Card>Item A</Card>
        <Card>Item B</Card>
        <Card>Item C</Card>
      </TopSection>
    </Wrapper>
  )
}