Клонировать и переименовать компонент

Question

У меня есть компонент, который часто используется и для многих porpuses - <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

Если это реактивный компонент, нет смысла его «клонировать».Поскольку, когда вы используете его, он создаст новый экземпляр.На самом деле я не совсем понимаю, зачем вам вообще нужно его переименовывать, но вот как вы можете это сделать

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