어떻게 ReactJS를 사용하여 DOM 요소를 동적으로 생성 할 수 있습니까?

Question

다음 배열을 가지고 있습니다 : 요소들 [[div ","span ","button "]. forEach 또는 ReactJS의 반복자를 사용하여 DOM에서이 요소를 동적으로 생성하려면 어떻게해야합니까?

그래서 출력으로 난 다음에 갖고 싶어 :

<div> Value1 <div> 
 
<span> Value 2 </span> 
 
<button> Click me! </button>

Answer 1

당신은 정말 그냥 'div' 교체 등의 간단한

React.createElement('div', {attribute: 'value}, [children]) 

으로 그것의, 그렇게하려면 귀하의 변수와 함께. Docs

Answer 2

사용 createElement 직접 (후드 것을 않습니다) JSX 쓰기보다는 :

const Test = (props) => { 
 
    let elements = ["div", "span", "button"]; 
 
    return (
 
     <div> 
 
      { 
 
       elements.map((el, index) => 
 
        React.createElement(el, { key: index }, "hello")) 
 
      } 
 
     </div> 
 
    ); 
 
}; 
 

 
ReactDOM.render(<Test />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

the docs에서 :

React.createElement(type, [props], [...children]) 

생성 및 반환 새로운 React 요소 f 지정된 형태. type 인수는 태그 이름 문자열 (예 : 'div'또는 'span')이거나 React 구성 요소 유형 (클래스 또는 함수) 일 수 있습니다.