那个道具是什么意思？

Question

In this example:

class TodoList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Route
          path="/todos/new"
          component={props => <NewTodoForm {...props} />}
        />
      </div>
    );
  }
}

In the NewTodoForm component, it reaches the {...props} by using

this.props.history.push("url")

I am confused that in {...props} , why does it use props rather than this.props ? I know that is a stateless function and props is a parameter. But where does that props come from?

Any help or comment will be appreciated, thanks.

Answer 1

component={props => <NewTodoForm {...props} />}

is using the render prop pattern, ie having a prop that is a function that returns something for the parent component to render.

The parameters passed to a render prop function could be anything, but in react-router'scomponent prop's case , it'll be the route props object, ie {match, location, history} .