Question

React应用程序的一些教程/示例以似乎具有紧密耦合组件的方式显示数据。例如：

class List extends React.Component {
    render() {
        <div className="table-responsive">
            <table className="table table-hover">
                <thead>
                    <tr>
                      <th>A</th>
                      <th>B</th>
                      <th>C</th>
                      <th>D</th>
                    </tr>
                </thead>
                <tbody>
                    {items.map(item => <ListItem key={item.id} ... />)}
                </tbody>
            </table>
        </div>
    }

您可以想象ListItem的样子。如果没有ListItem，就无法使用List，因为它们必须共享相同的布局。

我不知道这有助于创建可重复使用的组件。有办法解决吗？

Answer 1

我认为耦合实际上并不紧张。您只需进行一次更改即可在渲染循环中使用其他组件，而<ListItem />对<List />一无所知。

我无法看到任何长期利益，但您可以通过允许它接受上下文标记作为道具或作为高阶组件的参数来使<ListItem />更通用。

function ListItem({ Row='tr', Cell='td', key, item }) {
  return (
    <Row key={key}>
      <Cell>{item}</Cell>
    </Row>
  );
}

这将允许您通过传递不同的标记在非表格上下文中使用它。

<ListItem key={1} item="foo" Row="div" Cell="span" />

哪个会呈现为更通用的HTML。

<div>
  <span>foo</span>
</div>

您可以通过让<List />组件作为道具接受<ListItem />来为[AttributeUsage(AttributeTargets.Property)] public class KeyAttribute : Attribute { }做同样的事情。

但是我认为它比它们的价值更麻烦，你最终会浪费更多的时间来编写和测试这些通用的解耦，而不是你只是在相当松散的情况下工作在你的例子中耦合。

如何打破这些React演示组件之间的紧密耦合

1 个答案: