Question

我对React很新，我不知道是否有减少重复代码的模式。我知道更高阶的组件，但我不确定他们是否可以帮助我。这是我遇到的问题：

以下是该方案：

我的应用中有三个React组件：工作室，项目，演员

每个组件对应于前端的路由：

/ projects：Projects
/ studios：Studios
/ actors：Actors

每个组件都做了几乎相同的事情，循环遍历项目并渲染组件：

项目：遍历项目数据并为每个项目呈现Project组件
工作室：循环播放工作室的数据并为每个工作室渲染Studio组件
演员：遍历演员的数据并为每个演员呈现Actor组件

现在，Project，Studio和Actor的模型几乎相同，但略有不同：

Studio：图片，名称，详情
Actor：image，name和bio
Project：图片，标题和说明

此外，在“列表”视图中，当我点击某个项目时，它会转到该项目的详细信息。例如，当我点击项目项目时，当我在/projects视图上时，我需要/projects/:id并呈现ProjectDetail组件。现在，对于每个实体，我有三个组件：ItemList，Item，ItemDetail。总共3 x 3 = 9个组件。我觉得有更好的方法可以做到这一点。也许我不明白路由器的责任？现在，我为每个实体设置了ItemList和ItemDetail的路线：

/ projects：Projects
/ projects /：id：ProjectDetail

/ actors：Actors
/ actors / id：ActorDetail

/ studios：Studios
/ studios /：id：StudioDetail

最后，我想概括一下彼此非常相似的模型，以减少样板代码。可能：

ItemList：将data作为输入并呈现相应的Item组件。
Item：将显示在ItemList
ItemDetail：显示Item

和通用客户端路由规则，可以自动将路由映射到适当的组件。

Answer 1

我将在我的回答中提及组件 vs 实例;查看this article以获取差异的解释，或阅读 TL; DR ：组件是类或函数，它指定JSX标记的行为虽然实例通常由JSX以render方法表示。因此function Foo() { return <div />;}将是组件，而<Foo />将是实例。

JSX的神奇之处在于标签名称只是变量。例如，当您键入<div />时，标记名称只是指React核心定义的div变量。假设您已导入组件Foo，当您键入<Foo />时，标记名称是指您通过导入带入范围的变量。

您可以使用带有React组件的高阶组件，然后在render方法中使用该组件。例如（免责声明，我即时写这个并且可能包含错误）：

// Assume the variables `studios, actors, projects` are arrays
// of their respective item types, and `StudioDetail, ActorDetail,
// ProjectDetail` are the customized views you've described in
// your question.

class ItemList extends React.Component {
  render() {
    const View = this.props.view;
    const items = this.props.items;
    return (<div>
      {items.map((item, i) => <View key={i} item={item} />}
    </div>);
  }
}

class App extends React.Component {
  render() {
    return (<div>
      <ItemList view={StudioDetail} items={studios} />
      <ItemList view={ActorDetail} items={actors} />
      <ItemList view={ProjectDetail} items={projects} />
    </div>);
  }
}

请确保您传入view道具的任何内容都是与您正在展示的项目类型相匹配的组件，并且您应该有一个良好的开端。

在React

1 个答案: