相关疑难解决方法(0)

我有一个有条件地渲染几个子组件的react组件.简化的代码就是:

render(): {
  const component1 = condition ? renderComponent2() : null;
  const component2 = renderComponent2();

  return (
    <div>
      {component1}
      {component2}
    </div>
  );
}

问题是component2每次condition更改时都会被破坏并重新呈现.我试图阻止它并保持原始元素.我尝试添加一个key到component2没有运气.

[编辑]这种情况即使component1总是存在也会发生,我在其上更改标记以隐藏或不使用CSS:/

我从这里改编了以下组件定义,如下所示.但是,与示例不同,每次在鼠标上移动鼠标时,我的组件都会重新渲染.

重新渲染非常明显:

有谁知道为什么会这样？

import React, { Component } from 'react';
import { PieChart, Pie, Sector } from 'recharts';
import { Segment, Header, Dimmer, Loader, Grid } from 'semantic-ui-react';

const renderActiveShape = (props) => {

const RADIAN = Math.PI / 180;
const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle,
    fill, payload, percent, value } = props;
const sin = Math.sin(-RADIAN * midAngle);
const cos = Math.cos(-RADIAN * midAngle);
const sx = cx + (outerRadius + 10) * cos; …