Question

我有带导航的组件，在子组件的子项的单击项上传递了一些参数，这些参数是参数之一-具有className和url的对象“ itemImage”，如下所示：

{
    url: '/static/image.svg',
    className: 'absolute hidden md:block min-w-53 lg:min-w-68 mt-30 lg:mt-19 -ml-28 lg:-ml-75',
}

在子组件ItemComponent中：

{
     itemImage &&
     <img className={itemImage.className} src={itemImage.url} alt='' />
}

ItemComponent是根据导航中元素的顺序从数组中选择的（它负责传递给子组件的对象），因为导航元素的列表和图片数组的元素是不相关且长度不同。该示例是基于对象的map索引和带有图片的数组中的索引实现的，更准确地说。

问题：
当父母和孩子的状态更新时图片会闪烁，是否有可能以某种方式避免这种情况并使图片更改清晰可见而不会导致前一张卡的闪烁。

Answer 1

您可以使用下面提到的代码来渲染图像数组。

.form-group .form-control {
   outline: none;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

请在Demo此处查看演示

Answer 2

您可以采取一些措施来防止这种情况发生。

1-向元素添加关键道具。有助于了解它是以前的相同数据，而无需重新渲染该数据。

2-在闪烁元素https://reactjs.org/docs/react-api.html#reactpurecomponent上使用react PureComponent以防止重新渲染

3-代替purecomponent实现shouldComponentUpdate

在组件中闪烁图像

2 个答案: