嵌套的反应组件（标题）导致站点无响应

Question

我试图将Header组件嵌入到其他组件中，但是每次这样做都会导致站点无响应。

我尝试过的几件事包括更新了组件，因此页面（包括页眉）将被包含在fragment标签中。我也尝试过将Header放入div中，以查看是否会阻止该行为。

这里是Header.js

export default class Header extends React.Component { 

    render() {
        return (
          <>  
            <header className="header__container">
                <img className="header__logo" src={logo} alt="company Logo" width='200' />
                <div className="header__title-container">
                  <h1 className="header__title">Angel Mortgage</h1>
                </div>
                <Nav />
            </header>
          </>  
        )
    }

和Tools.js

export default class Tools extends Component {
    render() {
        return (
            <>
            {/* <Header /> */}
            <NavLink className="nav__link" activeClassName="active" to='/MortgageRateEst'>Mortgage Rate Estimater</NavLink>
            <Route path='/MortgageRateEst' component={InputForm} />

            <Footer />
            </>
        );
    }

即使该组件也具有渲染，它也不会显示相同的行为。我目前已将评论删除，以便您可以看到我要放置的位置。

我在以前的项目中使用了相同的结构，但是我对此感到茫然。

有什么建议吗？

谢谢。

Answer 1

从[C0开始]，React v16.2允许组件返回多个子代。进行React.Fragment与<>相同。

请尝试显式键入<React.Fragment>，因为某些构建工具无法使用<React.Fragment>。

<>