Як я можу динамічно створювати елементи DOM за допомогою ReactJS? - реагує

У мене масив із наступними значеннями: нехай елементи = ["div", "span", "button"]. Як я можу динамічно генерувати ці елементи в DOM за допомогою forEach або ітератора карти в ReactJS?

Отже, як вихід я хочу мати наступне:

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

Відповіді:

Використовуйте 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>

Від документи:

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

Створіть і поверніть новий елемент React заданого типу. Аргументом типу може бути або рядок імені тегу (наприклад, "div" або "span"), або тип компонента React (клас або функція).

Якщо ви дійсно хочете це зробити, це так просто, як

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

Просто замініть "div" зі своєю змінною. Документи