Question

我是React的新手。因此，这可能是一个非常基本的问题。但是不确定如何解决。

场景： 我有1个父TileLayout.jsx控件。此控件将呈现子Tile控件。传递给此TileLayout.jsx的道具是一个名为tileMetaData的对象。 tileMetaData只是一个对象，它是一个拼贴列表以及它们的标题和从中获取拼贴数据的Web服务URL：

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

在componentWillMount（）方法中，我通过遍历tileMetaData对象并获取Web服务URL来检索单个图块的数据。恢复数据后，我再次用tileData填充tileMetaData对象。

因此，最初会渲染仅包含标题的空图块。数据返回后，磁贴将加载数据。

在TileLayout.jsx的render方法中

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

React：动态创建子组件，避免重新渲染子组件

0 个答案: