在 React Router 4 中将 props 传递给组件答案

【问题标题】：Passing props to component in React Router 4在 React Router 4 中将 props 传递给组件
【发布时间】：2017-02-13 18:18:04
【问题描述】：

我是 react-router 新手，刚开始使用 react-router V4 编写应用程序。我想将道具传递给<Match /> 呈现的组件，我想知道这样做的“最佳”或“正确”方式是什么。

是通过做这样的事情吗？

<Match pattern="/" render={
    (defaultProps) => <MyComponent myProp = {myProp} {...defaultProps} />
}/>

这（将 props 传递给要由 <Match /> 渲染的组件）甚至是使用 react-router 这样做的好习惯，还是反模式或其他东西？如果是，为什么？

【问题讨论】：

对我来说看起来不错。

标签： javascript reactjs react-router

【解决方案1】：

render() {
  return (
    <Router history={browserHistory}>
      <Switch>
        <Route path="/" 
           render={ ()  => <Header 
             title={"I am Title"} 
             status={"Here is my status"}
           /> }
        />
        <Route path="/audience" component={Audience}/>
        <Route path="/speaker" component={Speaker}/>
      </Switch>
    </Router>
  )
}

【讨论】：

可能与您的 q 无关？但在反应路由器 4 中，它的工作方法是直到。
看起来你的评论应该是你答案的一部分。
是的，在 react router v4 中进行了许多更改，除非它会像以前一样工作。

【解决方案2】：

我对 react-router 还很陌生，遇到了类似的问题。我创建了一个基于 Documentation 的包装器，这似乎可行。

// Wrap Component Routes
function RouteWrapper(props) {
  const {component: Component, ...opts } = props

  return (
   <Route {...opts} render={props => (
     <Component {...props} {...opts}/>
   )}/>
 )
}

 <RouteWrapper path='/' exact loggedIn anotherValue='blah' component={MyComponent} />

到目前为止一切顺利

【讨论】：

我尝试根据 github 中的另一个示例来实现类似的东西，我遇到的问题是：当 props 是 api 调用时正在渲染的组件会将状态重置为空值

【解决方案3】：

render 道具用于编写内联匹配，因此您的示例是传递额外道具的理想方式。

【讨论】：

在这种情况下使用component而不是render更好吗？
@Qwerty 我刚刚编辑了我的答案以删除该评论。如果你使用内联函数，你也应该使用render。使用component 这样做确实效率低下（您将在每次渲染时卸载/安装新组件）。

【解决方案4】：

您必须使用render 属性而不是component 来传递自定义属性，否则只会传递default Route props ({match, location, history})。

我像这样将我的道具传递给路由器和子组件。

class App extends Component {

  render() {
    const {another} = this.props
    return <Routes myVariable={2} myBool another={another}/>
  }
}

const Routes = (props) =>
  <Switch>
    <Route path="/public" render={ (routeProps) => 
      <Public routeProps={routeProps} {...props}/>
    }/>
    <Route path="/login" component={Login}/>
    <PrivateRoute path="/" render={ (routeProps) =>
       ...
    }/>
  </Switch>

【讨论】：

【解决方案5】：

我将render 与定义的方法结合使用，如下所示：

class App extends React.Component {
  childRoute (ChildComponent, match) {
    return <ChildComponent {...this.props} {...match} />
  }

  render () {
    <Match pattern='/' render={this.childRoute.bind(this, MyComponent)} />
  }
}

【讨论】：

每次调用渲染时都要重新绑定组件。

【解决方案6】：

为了提高清晰度，我将按照以下方式进行操作。

const myComponent = <MyComponent myProp={myProp} {...defaultProps} />


<Match pattern="/" component={myComponent} />

这样你的router 代码就不会搞砸了！

【讨论】：

这有效吗？ documentation 表示 render 接受一个函数，而在您的示例中，您正在传递一个组件实例
我的错！更新了答案！
嗯，很抱歉再次询问，但这仍然有效吗？根据文档，component 采用组件 constructor，而您正在提供组件实例
有效。他们也通过了组件。
无论是否有效，您都在传递一个 React 元素。不是组件或实例。