定義React應用程序中的所有HTML？

Question

現在我只有一個HTML元素<div id="container"></div>和我所有的HTML代碼，這樣

const App = React.createClass({ 
    render() { 
    return (
     <div> 
     <div className='navbar navbar-dark'> 
      .. 
     </div> 
     <div className='container'> 
      .. 
     </div> 
     </div> 
    ); 
    } 
}); 

一個應用程序做出反應這是真的做到這一點的呢？只有我的菜單和內容是動態的。

舉例來說，我有菜單

<Link className='navbar-brand' to='/'>Brand</Link> 
<ul className='nav navbar-nav'> 
    <li className='nav-item'><IndexLink className='nav-link' to='/' activeClassName='active'>Home</IndexLink></li> 
    <li className='nav-item'><NavLink className='nav-link' to='/contact'>Contact</NavLink></li> 
</ul> 

它必須定義在反應，內容

<div className='container'> 
    {this.props.children} 
</div> 

也必須定義在發生反應。

但是所有其他的html都不是動態的，所以我應該在React中定義它，還是更好地使用正常的html文檔，其中只替換菜單和內容，然後將其餘部分保存爲普通html ？

Answer 1

您所有的app html都是靜態的，但是會使用虛擬DOM進行渲染。

由於您的導航和內容很可能會由某些路由機制運行，因此它們可能應位於相同的應用程序中。

你可以寫你的app組件內像這樣的更靜態函數刪除的生命週期方法的額外重量，作爲一個選項：

import React from 'react'; 

const App =() => (
    <div> 
    <div className='navbar navbar-dark'> 
     .. 
    </div> 
    <div className='container'> 
     .. 
    </div> 
    </div> 
);