배열의 다중 반응 구성 요소 렌더링

반응 구성 요소가 있습니다. 예를 들어 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`

반응 구성 요소의 배열을 이렇게 변환 할 수 있습니까? 그렇지 않다면, 이것에 대한 회피 접근법이 있습니까?

출처

2016-08-01 nitte93user3232918

수입 신고서가 제대로 작동합니까? 또한 array.map을 살펴보면 객체 데이터 배열을 구성 요소 배열로 변환하는 데 적합합니다.

출처

2016-08-01 14:59:26 John

어떤 import 문을 사용합니까? 나는 당신이 array_list에 대해서 이야기하고 있다고 가정하고 있습니다. 그렇습니다. 그렇다면 대답은 아니오입니다. 작동하지 않을 것입니다. 그것은 단지 sudo-code입니다. 함수 내부에 array_list를 생성하고 있습니다. – nitte93user3232918

아니요, 구성 요소를 가져옵니다. createElement가 null에 대해 불평하면 컴포넌트가 제대로 임포트되지 않은 것처럼 들립니다. – John

다음은 @ 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 요소를 내보내고 있습니다.

@ 존 (Jonn)은 이것이 당신이하고있는 일일 것이라고 제안합니다. 이를 수정하는 가장 좋은 방법은 MyComponent.js이 실제로 구성 요소를 내보내는 것입니다.

// MyComponent.js 

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

출처

2016-08-01 15:13:16 Kryten

배열의 다중 반응 구성 요소 렌더링

답변

관련 문제