克隆并重命名组件

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>
  )
}