Реагируйте: Создавайте дочерние компоненты динамически и избегайте повторного рендеринга дочерних компонентов. - PullRequest
0 голосов
/ 19 сентября 2019

Я новичок в React.Так что это может быть очень простой вопрос.Но я не уверен, как это решить.

Сценарий: У меня есть 1 родительский элемент управления TileLayout.jsx.Этот элемент управления отображает дочерние элементы управления Tile.Реквизиты, передаваемые в этот TileLayout.jsx, представляют собой объект с именем tileMetaData.Этот tileMetaData - это просто объект, представляющий собой список плиток вместе с их заголовками и URL-адресом веб-службы, из которого можно получить данные плиток:

tilesMetaData : {
   key : "some unique key",
   tileMetaData : { title : "string" , webserviceURL : "string"},
   tileData : { some data }
}

В методе componentWillMount () я получаю данные дляотдельные листы путем циклического перемещения по объекту tileMetaData и получения URL-адреса веб-службы.Как только данные получены, я снова заполняю объект tileMetaData с помощью tileData.

Таким образом, вначале отображаются пустые плитки с единственным заголовком.Как только данные возвращаются, плитки загружаются с данными.

В методе рендеринга TileLayout.jsx

render() {
    const { tilesMetaData } = this.props

    return (
      <div className="tileContainer">
        {
          tilesMetaData.size !== 0
          ?
            Object.keys(tilesMetaData).map((key, index) => (
              <Tile
                tileId={key}
                tileMetaData={tilesMetaData[key].tileMetaData} 
                tileData={tilesMetaData[key].tileData ? tilesMetaData[key].tileData : null}

              />
            ))
          :
            null
          }
      </div>
    )
  }

Проблема Каждый раз, когда загружается tileMetaDataс фактическим tileData весь элемент управления TileLayout перерисовывается.Я не хочу, чтобы это было перерисовано.Я только хочу, чтобы соответствующий элемент управления Tile, данные которого были восстановлены, повторно отображался.

Я попробовал пару вещей, но, похоже, ничего не работает.Любая помощь очень ценится.

Спасибо, YN

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...