Question

这里有另一个反应问题，我对我的问题有一个解决方案，但对我而言似乎并非“React”，所以我希望有另一个解决方案。

我正在使用react路由器，所以app.js（入口点）的底部是：

ReactDOM.render(

  <Router history={hashHistory}>
    <Route path="/" component={Layout}>
    <IndexRoute component={Login} ></IndexRoute>
      <Route path="searches" component={searches}></Route>
      <Route path="notifications" component={notifications}></Route>
    </Route>
   </Router>
  , app);

现在您可以看到我的首要组件是布局，所以在我看来我想配置我的（可重用）组件，例如我希望我的布局将菜单项的标题传递给标题组件，然后如果我是例如加载搜索然后我可能想要将函数等传递给搜索组件以挂钩它的功能，所以我在布局中有以下内容：

export default class Layout extends React.Component {
  constructor() {
    super();


  }


    render() {
      const containerStyle = {
        paddingRight: '5px'

      }

      // Figure out which props we want based on location.pathname
      const {pathname} = this.props.location;

      switch(pathname){
        case "/searches":
         // So now I need to add some props, functions or anything else to this component
          theProps = {someProp: "value"}
          const theComponent = React.cloneElement(this.props.children, {theProps})
          break;
      }
    return (

      < div style={containerStyle} class="container">
        < Header menuItems={this.getMenuItemsForScreen()}/ >
        { theComponent}

        < Footer / >
      < /div>
    );
  }
}

所以基本上为了从我的总体布局传递道具我必须克隆组件然后再给它一些道具？它感觉有点脏，但我似乎找不到嵌入这种逻辑的方法吗？

由于

马克

Answer 1

我认为这些路由组件的优点在于它们可以帮助您远离组件中那些丑陋的开关。

我不确定您要向搜索组件发送哪种道具。在您的问题中，不清楚您尝试解决的实际问题是什么，而不是使用react-router文档中的标准方法之一。

我建议考虑这些替代方案：

重构您的searches组件，以避免收到任何道具。尝试让每条路线都有一个没有任何道具的组件。因此，您可以在theProps = {someProp: "value"}组件中移动定义道具（searches）的代码。或者如果你需要在另一个时间内将searches组件与那些道具和其他道具一起重用，那么创建一个新的父组件来定义那些道具并调用searches组件。但是如果这些道具是复杂的并且依赖于你的app状态，那么你可以考虑使用 flux ， redux 或另一个状态容器，并获得来自app状态的那些。

如果您确实需要路由参数，请确保道具可以序列化，以便它们可以成为URL的一部分。检查以下代码中的message路线（从RouteConfiguration sample复制）：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

const About = React.createClass({
  render() {
    return <h3>About</h3>
  }
})

const Inbox = React.createClass({
  render() {
    return (
      <div>
        <h2>Inbox</h2>
        {this.props.children || "Welcome to your Inbox"}
      </div>
    )
  }
})

const Message = React.createClass({
  render() {
    return <h3>Message {this.props.params.id}</h3>
  }
})

render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="messages/:id" component={Message} />
      </Route>
    </Route>
  </Router>
), document.body)

在这种情况下，您的代码将在代码中的某处显示<a href={"/inbox/message/"+id} ...>，并且在这种情况下通过设置id参数来提供道具。

Answer 2

您可以通过以下代码在子组件中使用功能组件：

styled component

通过路由器传递的React Dynamic菜单项

2 个答案: