Блог

Я получаю список элементов по сети. Размер списка может меняться при каждом вызове. Я должен показать содержимое списка на моем сайте, основанном на дизайне React ant. Как сгенерировать этот динамический компонент? Что я сделал, так это,

 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? Нужно ли добавлять какой-либо ключ?

Каков наилучший способ получить желаемый результат?

Заранее большое спасибо.

Вы могли бы использовать 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>
  )
}