Question

现在我只有一个html元素<div id="container"></div>和我在这个React应用中的所有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>

必须在React中定义，内容

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

也必须在React中定义。

但是所有其他的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>
);

在React应用程序中定义所有HTML？

1 个答案: