渲染通過<a>

鏈路

在下面的例子其它組分，我有給正在單獨的頁面的想法兩個功能部件，但是，當然，它們僅顯示不同顏色的<div>框。現在渲染通過<a>

const Home =() => 
    <div style={{background:'red', height: 100, width: 100}}></div>; 

const About =() => 
    <div style={{background:'blue', height: 100, width: 100}}></div>;

，如果我想創建一個鏈接到我的網站的某些部分的導航條 - 忽略了可能的錯誤使用<a>環節，但它是要表明，我想那些致使其它部分作爲對點擊Navbar選項的迴應。

const Navbar =() => 
    <div> 
     <a href='#'>Home</a> 
     <a href='#'>About</a> 
    </div>;

如果我有一個名爲App一個組件，呈現不同的網頁對我來說：

const App =() => 
    <div> 
     <Navbar /> 
     // Render current page here; default is the `Home` component. 
    </div>; 

ReactDOM.render(<App />, document.getElementById('app'));

我怎麼能主動更新我的App組件呈現基於關閉的鏈接，或元素的點擊不同的頁面，在我的Navbar？

編輯： Soviut和finalfreq，謝謝你的回答！我從Codecademy網站的ReactJS的時候來了，所以過渡到JavaScript的「現實世界」和反應已經有點困難，因爲我已經瞭解ES6和無知大多數JS庫。無論如何，我明白，你們指出我的react-router方向，給了我如何實現我的目標，沒有它的例子。乾杯。

來源

2016-11-01 PyDive

這是react-router建做。

，在做的手工，不推薦，它會通過發出調用從包含您的「頁面」父組件傳遞給它一個回調函數click事件工作。該回調會告訴父容器哪個導航鏈接被點擊，並且它將決定要顯示哪個頁面以及停止呈現哪個頁面。

來源

2016-11-01 20:28:38 Soviut

缺席路由器/控制器爲每個頁面，你可以這樣做：

const pages = ['array', 'of', 'pages']; 

class App extends React.Component { 
    constructor(props) { 
    super(); 
    this.state = { 
     activePage: pages[0] 
    } 
    } 

    switchPage = (page) => { 
    this.setState({ 
    activePage: page 
    }) 
    } 

    renderActivePage =() => { 
    switch(this.state.activePage) { 
     case 'home': 
     return <HomeComponent /> 
    } 
    } 
    render() { 

    return (
     <div> 
     <Navbar switchPageFunction={this.switchPage}/> 
     {renderActivePage()} 
     </div>;) 
    } 

}

，然後剛剛成立的onclick到您的一個標籤實際上是switchPageFunction並在頁面名稱傳遞作爲論據。然後，父組件將收到更新，更新其自己的狀態，並呈現正確的組件。

我不建議這條路線，而是會考慮針對此用例構建的react-router

來源

2016-11-01 20:28:53 finalfreq

回答

相關問題