Javascript （ReactJs）如何在另一个组件中包含多个组件？

编辑：这个问题已经解决了。在Menu.js中，我写了“导出默认MenuChoise；”

我是新来的。对我来说，下面的代码应该产生两个按钮，一个是文本“showcontent”，另一个是文本“addnewbook”。相反，我得到一个按钮，没有任何文字。为什么?

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')
);

从“React”导入React；
从“react dom”导入react dom；
从“./页面/菜单”导入菜单；
ReactDOM.render(
,
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;

从“React”导入React；
从“/MenuChoise”导入MenuChoise；
类菜单扩展了React.Component{
render（）{
返回
(
);
}
}
导出默认菜单；

MenuChoise.js：

import React from 'react';

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

export default MenuChoise;

从“React”导入React；
类MenuChoise扩展了React.Component{
render（）{
返回(
);
}
}
导出默认菜单；

菜单组件的渲染方法返回

未定义

，因为您已将左括号放在下一行的

返回

之后

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

类菜单扩展了React.Component{
render（）{
返回
(
);
}
}

在浏览器评估代码之前，它会经过一个称为自动分号插入（ASI）的转换，在该转换中，它会尝试确定代码行的终止位置

在这种情况下，ASI在返回后添加一个分号，这会导致函数在没有返回值的情况下终止

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

render（）{
return；//菜单组件的渲染方法返回
未定义
，因为您已将左括号放在下一行的
返回
之后

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

类菜单扩展了React.Component{
render（）{
返回
(
);
}
}

在浏览器评估代码之前，它会经过一个称为自动分号插入（ASI）的转换，在该转换中，它会尝试确定代码行的终止位置

在这种情况下，ASI在返回后添加一个分号，这会导致函数在没有返回值的情况下终止

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

render（）{
return；//您尝试过
{this.props.choisetext}
吗？@DanPrince是的，我得到了相同的结果。您尝试过
{this.props.choisetext}
吗？@DanPrince是的，我得到了相同的结果。