那个道具是什么意思？

Question

在这个例子中：

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

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

在 NewTodoForm 组件中，它通过使用

到达 {...props}

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

我很困惑，在{...props}中，为什么使用props而不是this.props？我知道这是一个无状态函数，props 是一个参数。但是这些道具是从哪里来的呢？

如有任何帮助或意见，我们将不胜感激。

Answer 1

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

正在使用 render prop 模式，即有一个 prop 是一个函数，returns 父组件要渲染的东西。

传递给 render prop 函数的参数可以是任何东西，但在 react-router 的 component prop's case, it'll be the route props 对象中，即 {match, location, history}.

那个道具是什么意思？

What does that props mean?

reactjs

react-router

react-props