從數組渲染多個React組件

Question

我有一個react組件，比如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>);