（ReactJs）如何在另一個組件中包含多個組件？

Question

編輯：這已解決。在Menu.js中，我編寫了「導出默認MenuChoise;」。

我是新來的React。對我來說，下面的代碼應該產生2個按鈕，其中一個帶有文本「顯示內容」，另一個帶有文本「添加新書」。相反，我得到一個沒有文字的按鈕。爲什麼？

index.js：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Menu from './pages/Menu'; 

ReactDOM.render(
    <Menu text1="Show content" text2="Add new book"/>, 
    document.getElementById('app') 
); 

Menu.js：

import React from 'react'; 
import MenuChoise from './MenuChoise'; 

class Menu extends React.Component { 
    render() { 
     return 
      (<div> 
      <MenuChoise choisetext={this.props.text1}/> 
      <MenuChoise choisetext={this.props.text2}/> 
      </div>); 
    } 
} 

export default MenuChoise; 

MenuChoise.js：

import React from 'react'; 

class MenuChoise extends React.Component { 
    render() { 
     return(
      <button type="button" value={this.props.choisetext}/> 
     ); 
    } 
} 

export default MenuChoise; 

Answer 1

您的菜單組件的渲染方法返回undefined因爲你」在下一行的return之後放置了左括號。

class Menu extends React.Component { 
    render() { 
    return 
     (<div> 
     <MenuChoise choisetext={this.props.text1}/> 
     <MenuChoise choisetext={this.props.text2}/> 
     </div>); 
    } 
} 

之前的瀏覽器評估你的代碼，它通過一個稱爲自動分號插入（ASI）的轉化，其中它試圖找出那裏應該在哪裏終止行代碼。

在這種情況下，ASI在返回後添加分號，導致函數終止而沒有返回值。

render() { 
    return; // <-- asi happens here 
     (<div> 
     <MenuChoise choisetext={this.props.text1}/> 
     <MenuChoise choisetext={this.props.text2}/> 
     </div>); 
    } 

有沒有辦法反應知道這裏發生了什麼，所以它不能告訴你是什麼問題，但是，錯誤信息將是：

Uncaught Error: Invariant Violation: Menu.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

這至少會幫你理解其中問題來自於。