React에서 동적 HTML 요소 보간

Question

기본적으로 형식을 반복하고 p 요소 내부의 데이터를 렌더링하는 특정 구성 요소로 전달되는 계약은 JSON입니다. 그러나 기본 p 요소 대신 사용자 지정 HTML 요소를 설정하는 기능을 사용하고 싶습니다.

이것을 달성하기위한 좋은 기술은 무엇입니까? 예를 들어

:

이

// from 
const data = [{ text: 'hello' }, { text: 'world' }]; 
// to 
const data = [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }]; 

기본적으로 배열의 각 항목을 반복하고 텍스트를 렌더링하기 위해 자신의 사용자 정의 HTML 요소를 사용합니다. React의 비 JSX 구문을 사용하여이 작업을 수행 할 수 있다는 것을 알고 있지만 이러한 구성 요소는 매우 복잡하므로 JSX를 사용하는 것이 이상적입니다. 이견있는 사람? 어쩌면 두 가지를 결합하는 방법이 있습니다. (사용자 정의 요소에 대해 비 JSX를 사용하고 JSX를 사용합니까?)

Answer 1

지도를 사용하여 A 내부 React.createElement() 기능 지도처럼 React.createElement(item.element, null, item.text)

class App extends React.Component { 
 
    constructor(){ 
 
    super(); 
 
    this.state= { 
 
     data : [{ text: 'hello', element: 'span' }, { text: 'world', element: 'h1' }] 
 
    } 
 
    } 
 
    render() { 
 
    
 
    return (
 
     <div> 
 
     {this.state.data.map(function(item) { 
 
      return (React.createElement(item.element, null, item.text)) 
 
     })} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'));

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

Answer 2

내가 생각할 수있는 한 가지 방법은 switch 문을 사용하는 것입니다. 하지만 많이 가지고,하지만 난 잘 모르겠어요 직접 스팬 구성 요소가 백엔드에서 가능하다 element 반환을하지 않고 순간에 다른 방법을 생각할 수 없다.

_renderElementsFromJSON = (data) => { 
    var elements = []; 

    for(var i = 0; i < data.length; i++) { 
     switch(data[i].element){ 
      case "span": 
       elements.push(<span key={i}>{data[i].text}</span>); 
       break; 
      case "h1": 
       elements.push(<h1 key={i}>{data[i].h1}</span>); 
       break; 
      //etc 
     } 
    } 
    return elements; 
}