Question

现在大多数导航都已就位，您应该进行导航，以便   PetList中显示了不同的宠物。为此，请修改   /组件中的App路由，因此无需指定   component属性，您可以指定一个   render   属性。为该属性分配一个回调函数，该回调函数接受   一组道具，并返回带有这些道具的<PetList>元素   以及原始的 pet 道具。

提示：尝试将此函数声明为App的{{1}}函数内部的局部变量，然后将该函数值作为   支柱。这有助于提高可读性。

一旦成功，您应该可以在以下情况下看到宠物卡列表   您访问了render()路线。

这是主要问题，我已经解决了没有包装器的情况下如何进行布线。问题是一旦我尝试将其写入局部变量，我就会迷路。我有几个问题，包括：

该局部变量在哪里放置？是否将它放置在render函数中return语句之前？
上面的链接显示了如何执行此操作；我不知道如何将此应用于情况
我真的不了解/和...以及...rest和...的目的是什么？

...rest

Answer 1

该局部变量在哪里放置？是否将它放在render函数中return语句之前？

是的。你有这个：

render() {
  return (
    // ...
    <Route exact path='/' render={() => 
      <PetList pets={this.state.pets} />
    } />
    // ...
  );
}

文本告诉您执行以下操作：

render() {
  const renderPetList = () => <PetList pets={this.state.pets} />;

  return (
    // ...
    <Route exact path='/' render={renderPetList} />
    // ...
  );
}

我不太了解...和...rest以及...和...rest的目的是什么？

我不知道这是什么意思，但是我猜您在对象分解的上下文中已经看到了它。

这是一个人为的示例，但是假设您想为<button>创建一个包装器，该包装器需要一堆道具，这些道具将直接传递给<button>，而您不会传递（例如“ mySize”），因为您要先对它进行其他操作。您可以这样操作：

const MyButton = ({ mySize, childen, disabled, tabIndex, onClick, children }) => {
  const className = mySize === 'big' ? 'big-button' : 'normal-button';

  return (
    <button className={className} disabled={disabled} tabIndex={tabIndex} onClick={onClick}>
      {children}
    </button>
  );
};

这确实很冗长。无需重复要传递给<button>的所有道具的名称，我们可以使用...（“散布运算符”）来挑选某些道具以放入与之相关的变量会在 rest （ergo ...rest，尽管您可以随意调用它）中放入一个对象，使其更加简洁：

const MyButton = ({ mySize, ...restProps }) => {
  const className = mySize === 'big' ? 'big-button' : 'normal-button';

  return (
    <button className={className} {...restProps}>
      {children}
    </button>
  );
};

如何为React组件正确编写包装器？

1 个答案: