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，该prop是一个函数，该函数返回某些内容供父组件渲染。

传递给render prop函数的参数可以是任何参数，但是在react-router的component prop's case中，它将是route props对象，即{match, location, history}。

这些道具是什么意思？

1 个答案: