Question

我未能通过<Route />

传递财产

以下是一些代码：

./ app.jsx （主应用）

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, IndexRoute } from 'react-router'
import App from './components/app'
import Home from './components/home'
import About from './components/about'

render((
    <Router>
        <Route path="/" component={App}>
            <IndexRoute component={Home} title="Home" />
            <Route path="about" component={About} title="About" />
        </Route>
    </Router>
), document.getElementById('app'))

./组件/ app.jsx

import React from 'react';
import Header from './template/header'

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

export default App

./组件/模板/ header.jsx

import React from 'react'

class Header extends React.Component {
    render() {
        return (
            <span>{this.props.title}</span>
        )
    }
}

export default Header

当我点击我的主页路线时*我希望我的Header组件显示Home。

当我点击 about 路线时，我希望我的Header组件显示About。

此时，我的Header组件没有显示任何内容。我的this.props.title组件中的undefined为App。您似乎无法从<Route />

传递属性

有没有办法实现这个目标？

还是有另一种方式吗？例如，您可以从中获取 子元素（this.props.children.title或类似内容）吗？

Answer 1

看起来该路由会为routes属性注入一个匹配路由列表。列表中的最后一个路径包含您指定的道具。见http://codepen.io/anon/pen/obZzBa?editors=001

const routes = this.props.routes;
const lastRoute = routes[routes.length - 1];
const title = lastRoute.title;

我有点犹豫要使用它，因为routes没有记录this.props.location.pathname，所以我不知道版本更新的可靠性如何。一个更简单的选择，虽然不太清晰，但可以使用class Template extends React.Component { render() { return ( <div> <Header title={this.props.title} /> {this.props.children} </div> ) } } class About extends React.Component { render() { return ( <Template title="About"> Some Content </div> ) } }并维护标题的查找表。

最好和最灵活的选项可能是样板重的选项，您可以在其中定义模板，然后在组件之间重复使用它：

public void changeActionMenuItemsBackground(int color) {
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    for (int i = 0; i < toolbar.getChildCount(); i++) {
        final View v = toolbar.getChildAt(i);
        if (v instanceof ActionMenuView) {
            v.setBackgroundColor(color);
        }
    }
}

从路线获取属性

1 个答案: