Question

我有下一个值的数组： 让元素= [＆＃34; div＆＃34;，＆＃34; span＆＃34;，＆＃34;按钮＆＃34;] 。如何使用forEach在DOM中动态生成此元素或在ReactJS中映射迭代器？

所以我希望下一步输出：

＆＃13;

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

＆＃13;

Answer 1

直接使用createElement，而不是编写JSX（在幕后工作）：

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

来自the docs：

React.createElement(type, [props], [...children])
创建并返回给定类型的新React元素。 type参数可以是标记名称字符串（例如＆＃39; div＆＃39;或＆＃39; span＆＃39;），也可以是React组件类型（类或函数）。

Answer 2

如果真的想要这样做，那就像

一样简单

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

只需将'div'替换为您的变量即可。 Docs

Answer 3

我发现Gaurav Singhal在如何使用React.createElement方面分享了一个很好的例子：

let WelcomeText = React.createElement(
  "h1",
  { style: { color: "blue" } },
  "This is a welcome text"
);

这将使您拥有

<h1 style="color:blue">
  This is a welcome text
</h1>

但是，如果您只是像我这样的初学者或学习缓慢的人，并且您不知何故需要更多参考，以了解是否还有其他方法，我发现Corentin de Boisset和array.map()都在介绍如何使用{ {1}}在JSX中，我本人也使用array.map（）在JSX中播放视频，并且可以正常工作：

array.map()

尽管我也会推荐constructor (props) { super (props); this.state = {playList = []} } render() { let dynamicPlayer = this.state.playList.map((items) => { return ( <ReactPlayer url= {items.source}//'storage/star_war.mp4' className='react-player' width='100%' height='100%' volume={items.volume} controls = {true} />) }) return ( <Container> <div>{dynamicPlayer}</div> </Container> ); }。

如何使用ReactJS动态生成DOM元素？

3 个答案: