ReactJS：传递参数从路由器反应路由器到组件

我试图将渲染函数的值传递给组件：

= react_component('App', props: {test: 'abc'}, prerender: false)

Routes.jsx

<Route path="/" component={App} >

App.jsx（组件）

class App extends React.Component {
  render() {
    return (
      <Header test={this.props.test}>
      </Header>
      {this.props.children}
      <Footer />
    );
  }
}

App.propTypes = { test: PropTypes.string };

对于这个完整的流程似乎没有一个连贯的答案。

我已经尝试了以下内容：

<Route path="/" component={() => (<App myProp="value" />)}/>

但是这仍然没有回答提取初始渲染调用提供的值（react_component）的问题

---

寻找关于如何将参数从“视图”传递到“响应路由器”到“组件”的端到端解答

我们将从观点开始：

<%= react_component('MyRoute', {test: 123}, prerender: false) %>

现在我们将创建一个组件来保存我们的route ：

class MyRoute extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <Switch>
        <Route path="/" render={() => <App test={this.props.test} />} />
        <Route path="/login" component={Login} />
      </Switch>
    )
  }
}

如您所见，我们将test道具从Route组件传递到App组件。 现在我们可以在App组件中使用test道具：

class App extends Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      <h1>{this.props.test}</h1>
    )
  }
}

---

<Route path="/" render={attr => <App {...attr} test="abc" />} />

---

在路由器v3中，你会做这样的事情

像这样用Router包装你的App组件

import { withRouter } from 'react-router';

class App extends React.Component {
  render() {
    return (
      <Header test={this.props.test}>
      </Header>
      {
        this.props.children &&
        React.clone(this.props.children, {...this.props} )}
      <Footer />
    );
  }
}
App.propTypes = { test: PropTypes.string };
export const APP = withRouter(App);

并像这样构建你的路线......

<Route path="/" component={APP}>
  <Route path="/lobby" component={Lobby} />
  <Route path="/map" component={GameMap} />
  ...
</Route>

因此，您的孩子路线将在APP儿童属性内呈现，道具将传递给他们。

希望这可以帮助！

链接地址: http://www.djcxy.com/p/40889.html

上一篇: ReactJS: Pass parameter from rails to react router to component

下一篇: Idiomatic Gradle script to build 'debug' and 'release' JAR files