（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.

这至少会帮你理解其中问题来自于。