javascript - 克隆并重命名组件

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