在 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