(ReactJs) 如何在另一个组件中包含多个组件？

Question

编辑：已解决。在 Menu.js 我写了 "export default MenuChoise;".

我是 React 的新手。对我来说，下面的代码应该产生 2 个按钮，一个带有文本 "Show content"，另一个带有文本 "Add new book"。相反，我得到一个根本没有文本的按钮。为什么？

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 组件的呈现方法是 returning undefined，因为您在下一行的 return 之后放置了左括号。

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

在浏览器评估您的代码之前，它会通过一个称为自动分号插入 (ASI) 的转换，在其中尝试找出应该在何处终止代码行的位置。

在这种情况下，ASI 在 return 之后添加了一个分号，这导致函数在没有 return 值的情况下终止。

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

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

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

这至少可以帮助您了解问题出在哪里。

(ReactJs) 如何在另一个组件中包含多个组件？

(ReactJs) How include more than one component in another component?

javascript

reactjs

react-jsx

babeljs