如果在一个页面中有多个想同组件，请问如何进行区分每个组件的状态呢？

Question

请问一下有什么思路这样做到？

比如：
我有一个组件A（内有状态），
然后在我的一个容器面板中，我想要自由增加/删除组件A（也就是可以有多个组件A）

这里我有一点疑惑，每个组件都有名称一样的状态，我怎么做区分呢？特别是如果要结合zustand去保存状态，那么这里就重复了状态名。

Answer 1

添加，删除肯定都是对数组进行操作，每个组件都对应数组中的某项，可通过下标对组件进行区分

Answer 2

所有的列表都尽量使用数组进行存储，数组中每个元素都是一个组件，每个元素有自己的属性状态等，增加删除就是对数组进行增加删除

Answer 3

数据驱动视图，你这个列表应该是一个对象数组循环展示出来的，增加和删除都是通过操作数组来实现的，而每个组件循环展示时应该都有一个唯一的key（增加的时候手动生成一个uuid或者取时间戳），通过这个唯一的key就可以区分出来

Answer 4

你想一下你引用ant-design-vue里的input，你引入多少都行啊

Answer 5

import create from 'zustand'


const createUniqueStore = (id) => create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  id
}))

const ComponentA = ({ id }) => {
 
  const { count, increase } = createUniqueStore(id)

  return (
    <div>
      <p>{`Component ${id} count: ${count}`}</p>
      <button onClick={increase}>Increase</button>
    </div>
  )
}

const Container = () => {
  return (
    <div>
      <ComponentA id={1} />
      <ComponentA id={2} />
      <ComponentA id={3} />
    </div>
  )
}

Answer 6

最近在react中有一个这样的场景,我是通过ref的方式并存入数组,也可以在组件中挂载属性帮助区分