Question

我是一个反应组件，让我们说component_1。而且，我的数组就是格式，我要说array_list = [{}，{}，{}，{}]。

我试图在我的另一个组件component_2中渲染此组件，如下所示：

import component_1 from 'component_1'
import array_list from 'array_list'

class component_2 extends Component{
  constructor(props){
    super(props)
  }

  render(){
    const {renderMenu} = this.props
    var contentData = [];
    array_list.forEach(function(item, index, array){
          contentData.push(<component_1 {...item} />);
    });
    return(
        <div>
        <div className="ui four column centered grid">
           {contentData}
        </div>
      </div>
    )
  }
}

export default component_2

虽然，它通常适用于其他HTML元素。这会引发错误：

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `OnBoardingContentElement`

可以用这种方式渲染反应组件的数组吗？如果没有，那么有没有任何规避方法呢？

Answer 1

您确定您的导入声明有效吗？另外，请查看array.map，它非常适合将对象数据数组转换为组件数组。

Answer 2

这是@ John的回答。

昨晚我遇到了这个问题。这就是我在做的事情：

// MyComponent.js

export const MyComponent = (<h1>Hello, world</h1>);

// index.js

import { MyComponent } from './MyComponent';

React.render((<MyComponent />), document.getElementById('root'));

你能看到错误吗？这有点微妙。

问题是MyComponent.js没有导出React组件。它导出了一个已经实例化的React元素。

@John建议这可能是你正在做的事情。纠正它的最佳方法是确保MyComponent.js实际导出组件：

// MyComponent.js

export const MyComponent = () => (<h1>Hello, world</h1>);

从数组中渲染多个反应组件

2 个答案: