Reactjs组件可重用性

Question

我正在做一个react项目。其中不同选项卡上的大多数数据都有一个表。所以我设计了tableitem组件，并根据组件传递数据。现在基于参数，我切换表数据。这条路对吗?有些表有不同的列，所以数据表是变化的。

下面是该项目的代码片段。需要您的宝贵反馈https://codesandbox.io/s/amazing-ptolemy-k9kkrc?file=/src/App.js

Answer 1

代码是有效的，但你的标题是"组件可重用性">有几点你应该考虑。

1。该组件的可重用性如何?假设一段时间后需要显示另一个表。在这种情况下，这个组件对您有帮助吗?我真正想说的是，你的可重用组件的想法看起来更像是几个有条件渲染的组件，显示正确的一个。

2。不要锁定可重用组件基于location.pathname的组件条件渲染也阻碍了组件的可重用性。如果你的目标是拥有可重用的组件，那么限制组件只能在一条路由中使用，这是在搬起石头砸自己的脚。

3。更具体地说，考虑以下代码

<tbody>
{rowData.map((data) => (
<tr>
{Object.values(data).map((value) => (<td>{value}</td>))}
</tr>
))}
</tbody>

它将遍历array中的每个对象和object中的每个值。