（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

Menu组件的render方法返回的是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>);
  }

React没有办法知道这里发生了什么，因此它无法告诉您问题出在哪里，但是错误消息应该是：

未捕获的错误：始终违反：Menu.render（）：必须返回有效的ReactComponent。 您可能返回了undefined，数组或其他无效对象。

这将至少有助于您了解这个问题的来源。