javascript - 使用 React-Router 的 #createElement 在本地传递 props

Question

来自docs ，参数 Component 和 props 来自哪里？

// default behavior
function createElement(Component, props) {
  // make sure you pass all the props in!
  return <Component {...props} />
}

如果没有 React-Router，本地 props 会像这样传递到组件中:

const myProp="prop";
<ExampleComponent myProp={myProp} />

这是如何使用 React-Router 和 createElement 完成的？您会像这样在 Router 文件中创建自己的 createElement 函数吗？

const myProp="prop";
function createElement(Component, myProp) {
  // make sure you pass all the props in!
  return <Component {...myProp} />
}

那么myProp会传递给所有组件吗？

Answer 1

一般来说，您不需要提供 createElement支柱。默认行为将采用 component您传递给 <Route> 的 prop并渲染它。

来自 <RouterContext> source :

createElement(component, props) {
  return component == null ? null : this.props.createElement(component, props)
}

render() {
  if (components) {
    element = components.reduceRight((element, components, index) => {
      // ...
      return this.createElement(components, props)
    })
  }
  return element
}

在渲染函数中，components是 <Route>的component (或 components ) Prop 。 props是injected的 Prop 进入组件，例如位置和任何路径参数。

如果您想修改匹配的路线组件的呈现方式，则只需提供此 Prop 。例如，如果您想将每个路由的组件包装在 <Wrapper> 中组件，您可以创建以下 createElement功能。

function createElement(Component, props) {
  return <Wrapper><Component {...props} /></Wrapper>
}