反應如何將反應數組選擇的數組數據一個組件傳遞給另一個組件

Question

我想 select 一個人的數據是這樣的：

JSON 數據文件

{
    "person": [

      {
        "id": "userId",
        "sellerImage": "https://i.pravatar.cc/300",
        "lastOnline": "Date of last online",
        "sellerName": "Ryann Remo",
        "isOnline": true,
        "lastSeenDate": "Today",
        "product":"Rough Shirt",
        "messages": [
          {
            "id": "messageId",
            "userId": "userIdOfUser",
            "message": "Message text 01",
            "date": "Date of message",
            "isRead": false
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text 02",
            "date": "Date of message",
            "isRead": true
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message 03",
            "isRead": false
          }
        ]
      },

      {
        "id": "userId",
        "sellerImage": "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
        "lastOnline": "Date of last online",
        "sellerName": "Karp Bonolo",
        "isOnline": true,
        "lastSeenDate": "Yesterday",
        "product":"Rough Shirt",
        "messages": [
          {
            "id": "messageId",
            "userId": "userIdOfUser",
            "message": "Message text",
            "date": "Date of message",
            "isRead": false
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message",
            "isRead": true
          },
          {
            "id": "messageId",
            "userId": "userIdOfSeller",
            "message": "Message text",
            "date": "Date of message",
            "isRead": false
          }
        ]
      }
]
}

從上面的 JSON 文件導入數據....

  const person = AdminConversationData.person.map((data) => {
    return {
      ...data,
    };
  });

選擇這樣的特定人員數據

<RadioGroup>
  <div className="space-y-2">
    {person.map((item, idx) => (
      <RadioGroup.Option
        key={item}
        value={item}
        className={({ active }) =>
          `${
            active
              ? 'ring-2 ring-offset-2 ring-offset-red-300 ring-white ring-opacity-60 border-l-4 border-red-500'
              : ''
          }
            relative rounded-lg shadow-md px-5 py-4 cursor-pointer flex focus:outline-none entry cursor-pointer 
            transform hover:scale-105 duration-300`
        }
      >
          <>
        <div className="flex-2">
          <div className="w-12 h-12 relative">
            <img
              className="w-12 h-12 rounded-full mx-auto"
              src={"https://picsum.photos/200"}
              alt="chat-user"
            />
            <span className="absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white"></span>
          </div>
        </div>
        <div className="flex-1 px-2">
          <div className="truncate w-32">
            <span className="text-gray-800">{item.sellerName}</span>
          </div>
          <div>
            <small className="text-gray-600">Yea, Sure!</small>
          </div>
        </div>
        <div className="flex-2 text-right">
          <div>
            <small className="text-gray-500">{item.lastSeenDate}</small>
          </div>
          <div>
            <small className="text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block">
              23
            </small>
          </div>
        </div>
          </>
      
      </RadioGroup.Option>
    ))}
  </div>
</RadioGroup>

並且...我需要做的是，如果我需要 select 特定的個人數據，我需要將個人數據傳遞到此頁面上的另一個地方

舉個例子

<>
 <div class="relative">
    <span class="absolute text-green-500 right-0 bottom-0">
       <svg width="20" height="20">
          <circle cx="8" cy="8" r="8" fill="currentColor" class="absolute right-0 w-4 h-4 bg-green-600 border-2 border-green-700 rounded-full top-2 animate-pulse"></circle>
       </svg>
    </span>
 <img src="https://images.unsplash.com/photo-1549078642-b2ba4bda0cdb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144" alt="" class="w-10 sm:w-16 h-10 sm:h-16 rounded-full"/>
 </div>
 <div class="flex flex-col leading-tight">
    <div class="text-2xl mt-1 flex items-center">
       <span class="text-gray-700 mr-3">name</span>
    </div>
    <span class="text-lg text-gray-600">Seller</span>
</div>
</>

以上選定人員數據我想將此部分傳遞到相關位置（例如：姓名應為選定人員姓名）我該怎么做？

Answer 1

如果該組件是一個子組件，您可以在包含所選人員的父組件中初始化一個 state：

const [selectedPerson, setSelectedPerson] = useState(null);

您將需要處理onChange事件給 select 一個人：

const handleChange = (e) => {
    const pers = person.find(p => p.id === e.target.value)
    setSelectedPerson(pers)
}

...

{person.map((item, idx) => (
      <RadioGroup.Option
        key={item.id}
        value={item.id}
        onChange={handleChange}
        ...

然后，將其作為 prop 傳遞給子組件。
聲明您的子組件以檢索您需要的屬性：

const ChildComponent = ({ name }) => {
    return (
        <>
        <div class="relative">
            <span class="absolute text-green-500 right-0 bottom-0">
            <svg width="20" height="20">
                <circle cx="8" cy="8" r="8" fill="currentColor" class="absolute right-0 w-4 h-4 bg-green-600 border-2 border-green-700 rounded-full top-2 animate-pulse"></circle>
            </svg>
            </span>
        <img src="https://images.unsplash.com/photo-1549078642-b2ba4bda0cdb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=144&amp;h=144" alt="" class="w-10 sm:w-16 h-10 sm:h-16 rounded-full"/>
        </div>
        <div class="flex flex-col leading-tight">
            <div class="text-2xl mt-1 flex items-center">
            <span class="text-gray-700 mr-3">{name}</span>
            </div>
            <span class="text-lg text-gray-600">Seller</span>
        </div>
        </>
    )
}

並使用它們傳遞：

<ChildComponent {...selectedPerson} />

如果您需要將所選人員向下傳遞到多個級別，您可能需要使用上下文 API 。