子プロセスのプロパティや状態を再帰的にスキャンする

Question

（ルートの）現在のコンポーネントの（最初の）titleプロパティを取得するユーティリティ関数を作成しようとしています。

私はルートのタイルプロパティを取得することができます。

function getPageTitleByRoutes(routes) { 
    for (let i = routes.length - 1; i >= 0; i -= 1) { 
    if (routes[i].hasOwnProperty('title')) { 
     return routes[i].title; 
    } 
    } 

    return null; 
} 

しかし、今、私は私のコンポーネントにタイトルの小道具を移動したい：

function getPageTitle(props) { 
    // ?? Iterate recurively ?? Context ok on render ?? 
    React.Children.forEach(props.children, (child, i) => { 
    console.log(child + ' at index: ' + i); 
    // If it has title 
    // ?? 
    // ?? 
    if(title) return title; 
    return getPageTitle(child.props); 
    }); 

    return null; 
} 

私はこの下のようなコンポーネントのセットアップを持っているが、ルータを反応させます：

<Router> 
    <Route path="/" title="App Title" component={App}> 
    <Route path="page1" title="Comp A" component={Comp1} /> 
    <Route path="page2" title="Comp B" component={Comp2} /> 
    </Route> 
    <Route path="/login" title="Login Comp" component={Login} /> 
</Router> 


var NavBar = React.createClass({ 
    render() { 
    const someTitle = getPageTitleByRoutes(this.props.routes); 
    // Line above works but now want to get 'title' (defaultProps) 
    // from "active/routed" component: 
    const someTitle = getPageTitle(this.props); 
    return (
     <div> 
     <h2>{someTitle}</h2> 
     <ul> 
      <a onClick={() => history.push('page1') }>Page 1</a> 
      <a onClick={() => history.push('page2') }>Page 2</a> 
     </ul> 
     </div> 
    ) 
    } 
}); 

は、その後、私はこのように私のアプリを作成します。

var App = React.createClass({ 
    render() { 
    return (
     <div> 
     <NavBar /> 
     {this.props.children} 
     </div> 
    ) 
    } 
}); 

多分別の方法がありますか？私はまた、反応して還元された接続を持っています...

Answer 1

<NavBar />コンポーネントには小道具も子供も渡していません。このため、this.props.routesとthis.props.childrenは空です。

<NavBar />にルートの小道具と子供を与えてみてください。あなたはそこに何を追加するかを決めます。例えば

：

<NavBar routes={[{title: 'First Title'}, {title: 'Second Title'}]} />

それとも、それはあなたが意図している可能性のように見えたが、そのようにのようなあなたの<App />の子に沿って通過：

<NavBar> {this.props.children} </NavBar>