PROSAGA码农传奇-React-react-router - 将props传递给处理程序组件

15 条回复

0#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于react-router 2.5.2，解决方案非常简单： </p> <pre> <code> //someConponent ... render:function(){ return ( <h1>This is the parent component who pass the prop to this.props.children</h1> {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})} ) } ... </code> </pre> </DIV>

编辑
1#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> React Router v 4解决方案 </强> </p> <P> 我今天早些时候偶然发现了这个问题，这是我使用的模式。希望这对寻求更新解决方案的任何人都有用。 </p> <P> 我不确定这是不是 <EM> 最好 </EM> 解决方案，但这是我目前的模式。我通常有一个Core目录，我将常用组件与其相关配置（加载器，模态等）保存在一起，并且我包含一个这样的文件： </p> <pre> <code> import React from 'react' import { Route } from 'react-router-dom' const getLocationAwareComponent = (component) => (props) => ( <Route render={(routeProps) => React.createElement(component, {...routeProps, ...props})}/> ) export default getLocationAwareComponent </code> </pre> <P> 然后，在相关文件中，我将执行以下操作： </p> <pre> <code> import React from 'react' import someComponent from 'components/SomeComponent' import { getLocationAwareComponent } from 'components/Core/getLocationAwareComponent' const SomeComponent = getLocationAwareComponent(someComponent) // in render method: <SomeComponent someProp={value} /> </code> </pre> <P> 您会注意到我将组件的默认导出导入为简单的驼峰式案例，它允许我在CamelCase中命名新的，位置感知组件，以便我可以正常使用它。除了附加的导入行和赋值行之外，该组件的行为与预期相同，并且通常会添加所有路径道具。因此，我可以愉快地使用this.props.history.push（）从组件生命周期方法重定向，检查位置等。 </p> <P> 希望这可以帮助！ </p> </DIV>

编辑
2#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <H1> React-router v4 <EM> α </EM> </H1> <P> 现在有一种新的方法来做到这一点，尽管与之前的方法非常相似。 </p> <pre> <code> import { Match, Link, Miss } from 'react-router'; import Homepage from './containers/Homepage'; const route = { exactly: true, pattern: '/', title: `${siteTitle} - homepage`, component: Homepage } <Match { ...route } render={(props) => <route.component {...props} />} /> </code> </pre> <P> 附：这仅适用于alpha版本，并在v4 alpha版本发布后删除。在v4最新，再次，与道路和精确道具。 </p> <P> <a href="https://github.com/peter-mouland/react-lego" rel="nofollow noreferrer"> 反应-LEGO </A> 一个示例应用程序包含完全相同的代码 <a href="https://github.com/peter-mouland/react-lego/blob/react-router-4/src/app/routes.js" rel="nofollow noreferrer"> 在其react-router-4分支上的routes.js中 </A> </p> </DIV>

编辑
3#
回复此人
机器设备维修 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我提出的最干净的解决方案（React Router v4）： </p> <pre> <code> <Route path="/" component={props => <MyComponent {...props} foo="lol" />} /> </code> </pre> <P> <code> MyComponent </code> 还有 <code> props.match </code> 和 <code> props.location </code> ，并且 <code> props.foo === "lol" </code> 。 </p> </DIV>

编辑
4#
回复此人
绵绵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在1.0和2.0中你可以使用 <code> createElement </code> 的支柱 <code> Router </code> 指定如何准确创建目标元素。 <a href="https://github.com/rackt/react-router/blob/master/docs/API.md#createelementcomponent-props"> 文档来源 </A> </p> <pre> <code> function createWithDefaultProps(Component, props) { return <Component {...props} myprop="value" />; } // and then <Router createElement={createWithDefaultProps}> ... </Router> </code> </pre> </DIV>

编辑
5#
回复此人
樱花弄๑•ั็•็ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 用无状态函数组件包装它： </p> <pre> <code> <Router> <Route path='/' component={({children}) => <MyComponent myProp={'myVal'}>{children}</MyComponent/> }/> </Router> </code> </pre> </DIV>

编辑
6#
回复此人
子阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于路由器2.x. </p> <pre> <code> const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>; </code> </pre> <P> 在你的路线...... </p> <pre> <code> <Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}> </Route> </code> </pre> <P> 确保第3个参数是一个像这样的对象： <code> { checked: false } </code> 。 </p> </DIV>

编辑
7#
回复此人
哎？小查查 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你也可以结合使用es6和 <a href="https://facebook.github.io/react/docs/reusable-components.html#stateless-functions" rel="nofollow noreferrer"> 无国籍的功能 </A> 得到一个更清洁的结果： </p> <pre> <code> import Dashboard from './Dashboard'; import Comments from './Comments'; let dashboardWrapper = () => <Dashboard {...props} />, commentsWrapper = () => <Comments {...props} />, index = () => <div> <header>Some header</header> <RouteHandler /> {this.props.children} </div>; routes = { component: index, path: '/', childRoutes: [ { path: 'comments', component: dashboardWrapper }, { path: 'dashboard', component: commentsWrapper } ] } </code> </pre> </DIV>

编辑
8#
回复此人
冷月如霜·胡狼 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 用一个的<strong> 自定义路由组件 </强> ，这在React Router v3中是可行的。 </p> <pre class="lang-js prettyprint-override"> <code> var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var routes = ( <Route path="/" handler={Index}> <MyRoute myprop="value" path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); </code> </pre> <P> 至于 <code> <MyRoute> </code> 组件代码，它应该是这样的： </p> <pre class="lang-js prettyprint-override"> <code> import React from 'react'; import { Route } from 'react-router'; import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils'; const MyRoute = () => <div><MyRoute> elements are for configuration only and should not be rendered</div>; MyRoute.createRouteFromReactElement = (element, parentRoute) => { const { path, myprop } = element.props; // dynamically add crud route const myRoute = createRoutesFromReactChildren( <Route path={path} />, parentRoute )[0]; // higher-order component to pass myprop as resource to components myRoute.component = ({ children }) => ( <div> {React.Children.map(children, child => React.cloneElement(child, { myprop }))} </div> ); return myRoute; }; export default MyRoute; </code> </pre> <P> 有关自定义路径组件方法的更多详细信息，请查看我关于该主题的博客文章： <a href="http://marmelab.com/blog/2016/09/20/custom-react-router-component.html" rel="nofollow"> http://marmelab.com/blog/2016/09/20/custom-react-router-component.html </A> </p> </DIV>

编辑
9#
回复此人
一瓶泡沫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这可能是使用react-handler-dom和cookie处理程序的最佳方法 </p> <P> 在index.js中 </p> <pre> <code> import React, { Component } from 'react' import {Switch,Route,Redirect} from "react-router-dom" import {RouteWithLayout} from "./cookieCheck" import Login from "../app/pages/login" import DummyLayout from "../app/layouts/dummy" import DummyPage from "../app/pages/dummy" export default ({props})=>{ return( <Switch> <Route path="/login" component={Login} /> <RouteWithLayout path="/dummy" layout={DummyLayout} component={DummyPage} {...props}/> <Redirect from="/*" to="/login" /> </Switch> ) } </code> </pre> <P> 并使用cookieCheck </p> <pre> <code> import React , {createElement} from 'react' import {Route,Redirect} from "react-router-dom" import {COOKIE,getCookie} from "../services/" export const RouteWithLayout = ({layout,component,...rest})=>{ if(getCookie(COOKIE)==null)return <Redirect to="/login"/> return ( <Route {...rest} render={(props) => createElement(layout, {...props, ...rest}, createElement(component, {...props, ...rest})) } /> ) } </code> </pre> </DIV>

编辑
10#
回复此人
至此 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 只是ColCh答案的后续行动。抽象组件的包装非常容易： </p> <pre> <code> var React = require('react'); var wrapComponent = function(Component, props) { return React.createClass({ render: function() { return React.createElement(Component, props); } }); }; <Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/> </code> </pre> <P> 我还没有测试过这个解决方案，所以任何反馈都很重要。 </p> <P> 重要的是要注意，使用此方法，通过路由器发送的任何道具（例如params）都会被覆盖/删除。 </p> </DIV>

编辑
11#
回复此人
trpnest | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> React Router的问题在于它渲染你的组件，因此阻止你传递道具。该 <a href="http://grahammendick.github.io/navigation/" rel="nofollow"> 导航路由器 </A> 另一方面，您可以渲染自己的组件。这意味着你不必跳过任何箍来传递道具，如下面的代码和随附 <a href="https://jsfiddle.net/2ys854qc/" rel="nofollow"> 的jsfiddle </A> 节目。 </p> <pre> <code> var Comments = ({myProp}) => <div>{myProp}</div>; var stateNavigator = new Navigation.StateNavigator([ {key:'comments', route:''} ]); stateNavigator.states.comments.navigated = function(data) { ReactDOM.render( <Comments myProp="value" />, document.getElementById('content') ); } stateNavigator.start(); </code> </pre> </DIV>

编辑
12#
回复此人
那年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 根据Rajesh Naroth的答案，使用带或不带路由器的组件。 </p> <pre> <code> class Index extends React.Component { constructor(props) { super(props); } render() { const foo = (this.props.route) ? this.props.route.foo : this.props.foo; return ( <h1> Index - {foo} </h1> ); } } var routes = ( <Route path="/" foo="bar" component={Index}/> ); </code> </pre> <P> 或者你可以这样做： </p> <pre> <code> export const Index = ({foo, route}) => { const content = (foo) ? foo : (route) ? route.foo : 'No content found!'; return <h1>{content}</h1> }; </code> </pre> </DIV>

编辑
13#
回复此人
岁爵 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你可以通过传递道具 <code> <RouterHandler/> </code> 像这样： </p> <pre> <code> var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { var props = this.props; // or possibly this.state return ( <div> <header>Some header</header> <RouteHandler {...props} /> </div> ); } }); </code> </pre> <P> 这样做的缺点是你不分青红皂白地传递道具。所以 <code> Comments </code> 最终可能会收到真正用于不同组件的道具，具体取决于您的路线配置。从那以后，这不是什么大不了的事 <code> props </code> 是不可变的，但如果两个不同的组件期望一个名为的道具，这可能会有问题 <code> foo </code> 但具有不同的价值观。 </p> </DIV>

编辑

登录后才能参与评论