Question

我正在创建我的第一个使用react.js构建的Web应用程序（create-react-app和react-router 3.0.2，没有redux）并且我遇到了传递问题通过链接和路线的一个属性（我不确定我试图做的是一个正确的方法，并且＃34;做出应用的反应方式）

想法是AddCost组件（由于它不相关而不能粘贴）应根据传递给它的属性呈现一点点不同。但是，我不知道该怎么做（如果它甚至可能那样）

Index.js是主要的渲染组件，App.js是主容器，div是className =＆＃39; content＆＃39;是我希望{Home}和{AddCost}可以互换呈现的地方（当我在{Home}中的某个链接上碰巧时，我希望{AddCost}呈现在{Home}之前呈现的相同位置（并且有效））但我无法将支柱传递给{AddCost}组件，具体取决于我点击的链接

所以主要问题在于标题，当使用react-router进行路由时如何将信息从{Home}传递到{AddCost}？

＆＃13;

//Index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import Home from './components/Home'
import Stats from './components/Stats'
import Account from './components/Account'
import AddCost from './components/AddCost'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import './index.css'

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="/AddCost" component={() => (<AddCost costType="value" />)}/>
      <Route path="/stats" component={Stats} />
      <Route path="/account" component={Account} />
    </Route>
  </Router>,
  document.getElementById('root')
)

//App.js

import React, { Component } from 'react'
import './App.css'
import Header from './Header'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      costType: null
    }
  }
  render() {
    return (
      <div className='App'>
          <Header />
          <div className="content">
            {this.props.children}
          </div>
      </div>
    )
  }
}

export default App

//Home.js

import React, { Component } from 'react'
import { Link } from 'react-router'
import './Home.css'

class Home extends Component {
  render() {
    const costTypes = [
      { text: 'Health', icon: 'fa fa-heart' },
      { text: 'Bills', icon: 'fa fa-home' },
      { text: 'Gas', icon: 'fa fa-car' },
      { text: 'Vacation', icon: 'fa fa-plane' },
      { text: 'Lunch', icon: 'fa fa-coffee' },
      { text: 'Groceries', icon: 'fa fa-shopping-cart' },
      { text: 'Leisure', icon: 'fa fa-glass' },
      { text: 'Leisure', icon: 'fa fa-glass' },
    ]
    const listItems = costTypes.map((type, i) => (
      <Link key={i} className='cost__element' to='/addcost'>
        <i className={type.icon} aria-hidden="true"></i>
        <h1>{type.text}</h1>
      </Link>
    ))
    return (
      <section className='home'>
        <ul className='costList'>{listItems}</ul>
      </section>
    )
  }
}

export default Home

＆＃13;

此外，我很乐意接受有关任何重大错误或不良做法的信息。

Answer 1

这里有几个选项。其中之一是使用路线参数。

1）首先，您需要更改路线的path属性

<Route path="addcost/:type" component={AddCost} />

2）在您的AddCost组成者中，您可以输入this.props.params.type并决定要渲染的内容

class AddCost extends React.Component {
  render() {
    console.log(this.props.params.type)
  }
}

3）最后在链接中使用另一个to属性

<Link to="addcost/foo" />
<Link to="addcost/bar" />

如何通过Link和Route传递props / state - react.js

1 个答案: