Question

我是新手做出反应，我正试图将组件分开。以下是容器或组件的示例吗？对我来说，两者都是组件，但我不确定，因为它们有Link标签和Route标签。

Page.jsx

<main role="application">
      <Switch>
        {/* Home */}
        <Route path="/" exact component={Home} />
        {/* Profile */}
        <Route path="/user/:id" exact component={Profile} />
        {/* Error 404 */}
        <Route component={Error404} />
      </Switch>
    </main>

User.jsx：

function User(props) {
  return (
    <div id={`user-${props.id}`}>
      <Link to={`/user/${props.id}`}>
        {props.name}
      </Link>
      <p>{props.email}</p>
    </div>
  );
}

User.propTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
};

export default User;

Answer 1

我想你可能想知道React中的表示和容器组件的概念。你的两个例子都是表现性的组件，因为他们只是使用他们收到的道具来呈现他们的外表。他们不关心如何获得正确的道具数据。与表示组件相比，容器组件关心的是如何工作。他们应该负责业务逻辑，而演示组件只关心自己的UI逻辑。 This is an detailed explanation.

Answer 2

组件是React API的一部分。组件是描述React UI一部分的类或函数。

Container是连接到Redux存储的React组件的非正式术语。容器接收Redux状态更新和调度动作，并且它们通常不呈现DOM元素。他们将渲染委托给演示性子组件。

反应组件与容器

2 个答案: