在 React 中將組件與集成的應用程序代碼隔離

Question

我正在尋求幫助從我的代碼體中分離出組件。 我不知道如何鏈接當前在整個應用程序代碼中集成的輸入和輸出變量。 我試過提取呈現的 html(/jsx) 和輔助函數的一小部分，但到目前為止沒有運氣。 （這是培訓計划的要求。）

我的方法是將所需的片段剪切並粘貼到新的 javascript 文件中，在 app 函數中替換為對新 js 文件的組件調用（通過從組件導出，在 app 中導入），將組件中的對象變量替換為一個簡單的抽象名稱（例如，將“任務”更改為“對象”）並在組件調用中建立等價關系。 但是，我無法讓它工作——當我刪除原始變量並替換為組件調用時，其他一切都停止識別它們的變量。

因此，我正在尋求有關如何制作下面詳述部分的組件的建議和幫助。 抱歉，如果沒有具體的錯誤消息和到目前為止我的方法的完整細節，這是模糊的 - 我認為我從根本上缺少一些關於如何將組件與我目前擁有的代碼隔離的東西 - 我擁有的所有信息發現應該相關依賴於附加到應用程序組件中的屬性變量的props ，這不是我的應用程序編碼方式。 我希望我不必破壞我的代碼並重新開始。

首先，這是最小的包含代碼，html的基本內容：

//ListItem
<li
   key={listItem.index}
   onClick={() => {
      handleClick(listItem.index);
   }}
> {listItem.string}
</li>

之后將是它的容器元素：

//Div
<div>
  <h2>w/e</h2>
  <ul>
    {list
      .map((item, index) => ({ ...item, index }))
      .filter((item) => item.position === "right")
      .map((listItem) => (
        <ListItem props.../> // the ListItem component defined before
     ))}
  </ul>
</div>

所以最后，我會：

<body><Div props... /></body>

我試圖作為組件分離的最后一件事是用於通過useState設置狀態的對象數組：

//Tasks
//const [list, setList] = useState(
  [
    { string: "string", position: "position" } //and many more
  ]);

Answer 1

對於您提取的每一段代碼，問問自己“這段代碼需要呈現哪些信息？” 這個問題的答案成為你的道具。 ListItem需要key 、 onClick及其內容。 您可以將內容作為字符串屬性傳遞，也可以使用props.children 。

並非每個 JSX 元素都需要成為它自己的組件。 考慮哪些代碼塊會根據應用程序的變量而變化。 這些變量變成了道具，而那些代碼塊變成了組件。

在 React 中將組件與集成的應用程序代碼隔離

問題描述

1 個解決方案

解決方案1
1 已采納 2020-10-13 00:06:32

在 React 中將組件與集成的應用程序代碼隔離

問題描述

1 個解決方案

解決方案1 1 已采納 2020-10-13 00:06:32

解決方案1
1 已采納 2020-10-13 00:06:32