如何在 React 中生成动态 DOM 元素

Question

我正在通过网络获取元素列表。每次调用的列表大小可能会有所不同。我必须在基于 React ant-design 的站点中显示列表内容。如何生成这个动态组件？我所做的是，

export const myModal = props => {


const contactArr = [];

for(let i=1;i<=props.contactList;i++){
    const eachRow = `<Row style={{border : '1px solid red'}}>
                        <Col>
                            <Text>Test<Text>
                        </Col>
                    </Row>`
    contactArr.push(eachRow);
}

return (
    <Modal
        visible={props.isVisible}
        width={'40%'}
        onCancel={props.handleEditModalCancel}
        footer={[
            <Button key="back" onClick={props.handleContactModalCancel}>
                Cancel
            </Button>,
            <Button key="submit" type="primary" onClick={props.contactModalConfirm}>
                {/*<Button key="submit" type="primary" onClick={props.inputSubmit}>*/}
                Submit
            </Button>
        ]}
    >
        <div>
            {contactArr.join('')}

        </div>


    </Modal>
);

}

但是，我得到的不是带有列的渲染行，而是简单的字符串输出，例如，

<Row style={{border : '1px solid red'}}> <Col> <Text>Test<Text> </Col> </Row><Row style={{border : '1px solid red'}}> <Col> <Text>Test<Text> </Col> </Row><Row style={{border : '1px solid red'}}> <Col> <Text>Test<Text> </Col> </Row><Row style={{border : '1px solid red'}}> <Col> <Text>Test<Text> </Col> </Row><Row style={{border : '1px solid red'}}> <Col> <Text>Test<Text> </Col> </Row><Row style={{border : '1px solid red'}}> <Col> <Text>Test<Text> </Col> </Row>

如何获得这样的渲染输出。我的方法是否正确，因为我知道直接 DOM 操作在 React 中不好？我需要添加任何密钥吗？

获得理想结果的最佳方法是什么？

非常感谢。

Answer 1

您可以使用 map 使用您的数据数组创建 React 元素。

一个简单的例子是这样的。

// inside your return statement.
return (
  <div>
    {props.contactList.map(contact => { 
      return <p>{contact}</p>
    })
  </div>
)

另一个例子

import React from 'react';

export default function App() {
  const numbers = [1, 2, 3]

  return (
    <div>
     {numbers.map(num => {
       return (
         <div>
            <p>{num}</p>
         </div>
       )
     })}
    </div>
  )
}