是否可以从一个组件中复制一个对象的属性，并在另一个组件中使用refs显示它们？

Question

假设我有2个组件。其中一个是一个包含商店列表的表格，每个商店都有颜色、项目、打开、关闭等属性。每个商店都有颜色、项目、打开、关闭等属性。另一个组件是一个创建商店的组件。

我希望能够在已经创建的商店上点击一个小的复制图标，然后将这些信息带到创建商店的组件中，并将属性填充到该组件中，以便进行更改并创建一个全新的商店。

使用refs可以做到这一点吗？还是有更好的方法？

Answer 1

使用ref这个任务是一个错误。React使用的是虚拟DOM，它是一个更干净、更快速的对象树，其信息将通过React DOM的REF API直接访问DOM信息，你不需要从DOM中获取任何信息来完成你的任务。

https:/reactjs.orgdocsrefs-and-the-dom.html。

做你所描述的事情的方法是在父组件上创建一个stateetState，然后为商店组件传递一个状态，为表组件传递一个setState，例如。

import React, { useState } from 'react'

const StoreComponenet = ({ color, item, open})=>{
  // logic of component
  return (
    <div> 
      // ...
    </div>

  )
}


const TableComponent = ({ setStore })=>{
  // logic of component
  return (
    <table>
      <tr onClick={() => setStore("blue", {id: 2, name: "BlueStore" }, false)}>
        Build blue store
      </tr>
      ...
   </table>

  )
}

const App = ()=>{
  const [store, setStore] = useState(null)

  return (

    <TableComponent setStore={setStore} />

    {
      store && 
        <StoreComponent 
          color={store?.color} 
          item={store?.item} 
          open={store?.open} 
        />
    }

  )

}