如何顯示兩個反應組件-有解無憂

這是我第一次使用 React，需要一些幫助。我的 App.js 類中有一個 TextEditor 組件和一個 Navbar 組件。我試圖讓兩者都顯示在我的頁面上，但只能看到 TextEditor 組件。洗掉此組件后，我可以看到 Navbar 組件。如何在我的頁面上看到這兩個組件？

class App extends Component {
  render() {
  return (
    <Router>
    <div className="App">
      <Switch>
        {/* Navbar */}
        <Route exact path="/" component={Navbar} />
        <Navbar bg="light" expand="sm"/>
        {/* Home page */}
        <Route path="/" exact> 
          <Redirect to={`/documents/${uuidV4()}`} />
        </Route>
        {/* TextEditor */}
        <Route path="/documents/:id" component={TextEditor}> 
          <TextEditor />
        </Route>
      </Switch>
      </div>
    </Router>
  )
  }
}

uj5u.com熱心網友回復：

試試這個代碼，這會在每個頁面上添加標題，并在 Switch 外放置組件 Navbar

class App extends Component {
  render() {
    return (
        <Router>
            <div className="App">
                {/* Navbar */}
                <Navbar bg="light" expand="sm"/>
                <Switch>
                    {/* Home page */}
                    <Route exact path="/"> 
                        <Redirect to={`/documents/${uuidV4()}`} />
                    </Route>
                    {/* TextEditor */}
                    <Route path="/documents/:id" component={TextEditor}> 
                        <TextEditor />
                    </Route>
                </Switch>
            </div>
        </Router>
    )
  }
}

或僅使用組件 TextEditor 添加標題

class App extends Component {
  render() {
    return (
        <Router>
            <Switch>
            {/* Home page */}
            <Route exact path="/"> 
                <Redirect to={`/documents/${uuidV4()}`} />
            </Route>
            {/* TextEditor */}
            <Route path="/documents/:id" component={TextEditor}> 
                {/* Navbar */}
                <Navbar bg="light" expand="sm"/>
                <TextEditor />
            </Route>
            </Switch>
        </Router>
    )
  }
}

uj5u.com熱心網友回復：

您需要使用一個片段來包裝 return 陳述句中的所有內容。它基本上只是一個空的 html 標簽，如下所示。

https://reactjs.org/docs/fragments.html

class App extends Component {
  render() {
  return (
   <>
    <Router>
    <div className="App">
      <Switch>
        {/* Navbar */}
        <Route exact path="/" component={Navbar} />
        <Navbar bg="light" expand="sm"/>
        {/* Home page */}
        <Route path="/" exact> 
          <Redirect to={`/documents/${uuidV4()}`} />
        </Route>
        {/* TextEditor */}
        <Route path="/documents/:id" component={TextEditor}> 
          <TextEditor />
        </Route>
      </Switch>
      </div>
    </Router>
   </>
  )
  }
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345871.html

標籤：javascript 反应成分

上一篇：錯誤：無法驗證第一個證書-Springboot

下一篇：如何在redux中獲取以前的狀態