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

【问题标题】：How to properly write a wrapper for a React component?如何正确地为 React 组件编写包装器？
【发布时间】：2019-06-11 21:01:38
【问题描述】：

现在您的大部分导航已经到位，您应该这样做不同的宠物在PetList 中显示。为此，请修改 / 组件中的 App 路由，以便代替指定 component 属性，您指定一个 render 财产。该属性被分配一个回调函数，该函数接收一组道具，并返回带有这些道具的<PetList>元素为以及原来的pet道具。

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

一旦成功，您应该能够在以下情况下看到宠物卡列表您访问/ 路线。

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

我应该把这个局部变量放在哪里？放在render函数的return语句之前对吗？
但是，上面的链接显示了如何执行此操作；我不知道如何将其应用于这种情况
我不太明白... 和...rest 单独使用... 以及使用...rest 的目的是什么？

render() {
  return (
    <div>
      <header className="jumbotron jumbotron-fluid py-4">
        <div className="container">
          <h1><Link to='/'>Adopt a Pet</Link></h1>
        </div>
      </header>

      <main className="container">
        <div className="row">
          <div className="col-3">
            <AboutNav />
          </div>
          <div className="col-9">
            <Switch>
              <Route exact path='/' render={() => 
                <PetList pets={this.state.pets} />
              } />
              <Route exact path='/about' component={AboutPage} />
              <Route exact path='/resources' component={ResourcesPage} />
              <Redirect to='/' />
            </Switch>
          </div>
        </div>
      </main>

      <footer className="container">
        <small>Images from <a href="http://www.seattlehumane.org/adoption/dogs">Seattle Humane Society</a></small>
      </footer>
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案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>
  );
};

【讨论】：