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

Question

Now that most your navigation is in place, you should make it so that the different pets are shown in the PetList . To do this, modify the / route in the App component so that instead of specifying a component property, you specify a render property. This property be assigned a callback function that takes in a set of props, and returns a <PetList> element with those props as well as the original pet prop.

Tip: Try declaring this function as a local variable inside of the App 's render() function, and then passing that function value as a prop. This can help with readability.

Once this works, you should be able to see the list of pet cards when you visit the / route.

This is the main problem, of which I have solved how to route without the wrapper. The problem is once I try write this into a local variable I get lost. A few questions I had include:

• Where do I place this local variable? It is placed before the return statement in the render function correct?
• The link above shows how to do this, however; I do not know how to apply this to the situation
• I don't really understand ... and ...rest what is the purpose of ... alone as well as with ...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>
  );
}

Answer 1

Where do I place this local variable? It is placed before the return statement in the render function correct?

Yes. You have this:

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

The text is telling you to do something like this:

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

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

I don't really understand ... and ...rest what is the purpose of ... alone as well as with ...rest ?

I can't tell what this is in reference to, but I'm guessing you've seen it in the context of object destructuring.

This is a contrived example, but Suppose you wanted to create a wrapper for <button> that takes a bunch of props that you'll pass straight to the <button> and one that you won't (let's say " mySize "), because you want to do something else with it first. You could do it this way:

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>
  );
};

That's really verbose, though. Instead of repeating the names of all of the props we want to pass to <button> , we can use ... (the "spread operator") to pick out certain props to put in variables to do with as we will while the rest (ergo ...rest , although you can call it whatever you want) go in an object, making it much more concise:

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

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