那个道具是什么意思？答案

【问题标题】：What does that props mean?那个道具是什么意思？
【发布时间】：2018-08-22 06:30:47
【问题描述】：

在这个例子中：

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 是一个参数。但是这些道具是从哪里来的呢？

任何帮助或评论将不胜感激，谢谢。

【问题讨论】：

props 在组件标记中传递。例如：如果你有 dom component<TodoList prop1="val1" prop2="val2"> 那么你的组件的 props 将是 {prop1: "val1", prop2: "val2"}
查看这篇文章。它将帮助您了解更多stackoverflow.com/questions/44255415/…
感谢您的 cmets。

标签： reactjs react-router react-props

【解决方案1】：

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

正在使用render prop 模式，即有一个 prop 是一个函数，它返回一些东西供父组件渲染。

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

【讨论】：

感谢您的帮助，真的很有帮助。