Question

编辑：这已经解决了。在Menu.js中，我写了“export default 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组件的呈现方法返回Drawable upArrow = ContextCompat.getDrawable(this, R.drawable.back); getSupportActionBar().setHomeAsUpIndicator(upArrow);，因为您已在下一行的undefined后面放置了左括号。

return

在浏览器评估你的代码之前，它会通过一个名为自动分号插入（ASI）的转换，它会尝试找出应该在哪里终止代码行的地方。

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

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

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

未捕获错误：不变违规：Menu.render（）：必须返回有效的ReactComponent。您可能已经返回了undefined，数组或其他一些无效对象。

这至少可以帮助您理解问题的来源。

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

1 个答案: