ReactJS:从rails传递参数以将路由器与组件进行反应

Question

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

= 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)

Answer 1

寻找有关如何将参数从“视图”传递到“反应路由器”再到“组件”的端到端答案

我们将从视图开始：

<%= 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>
    )
  }
}

正如你所看到的，我们将testprop 从Route组件传递给了App组件。test现在我们可以在组件中使用prop App：

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