Question

我有 2 个组件，我知道问题在于它们无限地相互渲染，但是我该如何以不同的方式做到这一点？当呈现“Subs”组件时，它会呈现范围表组件。呈现范围表时，我需要重新呈现 Subs 组件，因为它形成了某种弹出窗口。我还能怎么做？

订阅组件 -

const Subs = connect(
  mapStateToProps,
  mapDispatchToProps
)((props) => { 

const { project, section, bid, bidId } = props;


return (
<>

<div>other things</div>

<Scopesheet
          
          bidId={bidId}
          bid={bid}
          section={section}
          project={project}
         
        />
</>
)


})

export default Subs;

范围表组件 -

function Scopesheet(props) {
  const classes = useStyles();
  const canvasRef = useRef();
  const canvasWrapper = useRef();

  const {
    section,
    bid,
    bidId,
    project,
   
    
  } = props;

  const subUI = useMemo(() => {
    const subsArray = [];

    subsArray.push(
      <Subs key={bidId} section={section} bid={bid} project={project} />
    );

    return (<div>{subArray}</div>);

  }, [section, bid, project, bidId]);

  return (
    <>
      <div ref={canvasWrapper} className={classes.scopesheetCanvasWrapper}>

        {subUI}

        <canvas style={{ float: 'right' }} ref={canvasRef}></canvas>
      </div>
     

    </>
  );
}

export default Scopesheet;

我正在将重要信息从 Subs 传递到 Scopesheet，例如我需要从中执行不同操作的 bidId 和 props，但在范围表中，我需要能够再次呈现 Subs 组件以形成弹出窗口。有没有办法让我以不同的方式做到这一点？

Answer 1

让组件作为彼此的孩子只会给你那种性能。我强烈建议您使用某种形式的回调 Props 来更新您的 subs。并从 Scopesheet 组件中删除 useMemo 和 subs。现在在 subs 中向 Scopesheet 添加一个新道具，就像这样......

<Scopesheet
          
          bidId={bidId}
          bid={bid}
          section={section}
          project={project}
          cb={cbFunction} 
         
        />

并且 cbFunction 应该需要这些参数

function cbFunction(bidId,bid,section,project) {
// update your state through here
}

建议：考虑使用 useState 钩子或 useReducer 来管理您的状态。

更新：

<块引用>

我很难理解 cbFunction 的确切用途是什么。我没有更新任何一个组件的状态，所以我不确定你想说什么。有没有一种方法可以只在 subs 中渲染 scopesheet 组件一次？基本上，有一个包含名为 subs 的信息的容器，在 subs 中我呈现范围表，在范围表中我有按钮，点击这些按钮会导致一个弹出窗口，然后我需要在弹出窗口中再次渲染 subs 容器，但这是导致一个无限循环。对不起，如果我在问题中不清楚。

有没有办法只在 subs 中渲染 scopesheet 组件一次？

如果 subs 中的信息/数据是可变的，它仍然会导致范围表重新呈现，具体取决于您处理数据的方式。如果不这样做，您可以检查 useRef不希望更改数据以重新呈现范围表。

在范围表中，我有按钮，点击这些按钮会导致一个弹出窗口，然后我需要在弹出窗口中再次渲染 subs 容器，但这会导致无限循环。

如前所述，如果您再次将子容器作为范围表的子容器，则无限循环是不可避免的。一个简单的方法是使用 material-ui modal。设置一个新的 DOM_Node 并使用一些纯 js 和 css 样式来设置您的弹出窗口。你可以参考这个article。如果我的回答还不够清楚，您可以尝试提供更多的实现代码片段，并更连贯地说明您要实现的目标。其他 stachoverflowers 或许可以给出答案。

快乐编码...

2个子组件无限重新渲染

1 个答案: