Блог

Я пытаюсь создать динамическую сетку для видеокомпонентов, но не могу понять, как это сделать, потому что у меня есть элемент, который не генерируется динамически. первый видеоэлемент создается нормально, остальные элементы генерируются с помощью функции отображения.

Я хотел бы генерировать строки для каждых 3 элементов, включая первый.

Это код, который у меня есть сейчас:

 renderPeers() {
    return (
        <div className = "participants">
            <video id="myVideo" ref={video => this.video = video} controls autoPlay playsInline muted></video>
            {
                Object.entries(this.state.peers).map(entry => {
                    const [peerId, peer] = entry
                    console.log('render peer', peerId, peer, entry)
                    return (
                        <video key = {peerId} ref={video => peer.video = video} controls autoPlay playsInline muted></video>
                    );
                })
            }
        </div>
    );
}
 

Состояние одноранговых узлов содержит такие объекты, как:

 {
    peer: peerObject,  // simple-peer object
    peerId: peerID     // peerID = socket ID of peer
}
 

Я мог бы генерировать строки и столбцы начальной загрузки, используя переменную counter, но у меня есть первый элемент, который не является частью массива, который я использую для генерации остальных элементов.

Как я мог бы сделать так, чтобы у меня были сгенерированные строки с 3 столбцами, включая первый элемент?

Я собираюсь предположить, что ваш state.peers выглядит так:

 [ 
    {
        peer: {...},
        peerId: 1
    },
    {
        peer: {...}, 
        peerId: 2
    }
]
 

Потому что вы упомянули, что у вас есть несколько одноранговых узлов для визуализации.

Тем не менее, я уверен, что вы неправильно используете Object.entries , поскольку эта функция предоставляет итератор через ваш объект, предоставляя вам ключи и значения.

В вашем случае этот код должен решить вашу проблему:

 renderPeers() {
    return (
        <div className = "participants">
            <video id="myVideo" ref={video => this.video = video} controls autoPlay playsInline muted></video>
            {
                this.state.peers.map( item => {
                    const {peerId, peer}
                    return (
                        <video key={peerdId} ref={video => peer.video = video} controls autoPlay playsInline muted></video>
                    )
                })
            }
        </div>
    );
}
 

В основном ваша проблема была в Object.entries если вам нужно найти какие-то конкретные свойства в вашем объекте, гораздо лучше использовать оператор деструктурирования, например:

 const pepe = {
  id: 1,
  name: 'pepe'
}

const {id,name} = pepe

console.log(id, name), //1 pepe
 

Вы должны использовать Object.entries, когда хотите проверить структуру объекта, обычно когда это динамический объект, структура которого вам неизвестна.