childA的状态改变怎么可能不渲染自己，而是渲染childB

Question

我正在开发一个项目，其中父母有两个孩子 - A 和 B。

childA 有一个按钮列表，当用户单击其中一个按钮时，我想捕获按钮的 ID。但是，我不希望 childA 被重新渲染。

我想要的是 childB 接收按钮的 ID，并渲染自身。

我相信使用状态是每次单击按钮时都会重新渲染 ChildA 的原因。这里实现愿望行为的正确方法是什么？

（为了上下文，我简化了一些事情以使问题变得清晰，实际上childA是一张地图，而childB是一张图表。）

export function Parent() {
  [buttonId, setButtonId] = useState(null);
  return (
    <>
      <ChildA buttonId={buttonId} onClick={(id) => setButtonId(id)} />
      <ChildA inputId={buttonId} />
    </>
  );
}

export function ChildA({ buttonId, onClick }) {
  return (
    <>
      <Button key='1' onClick={onClick(1)}>
      <Button key='2' onClick={onClick(2)}>
      <Button key='3' onClick={onClick(3)}>
      <Button key='4' onClick={onClick(4)}>
      <ElementIDoNotWantRerenderedWhenAButtonIsClicked />
    </>
  );
}

export function ChildB({ inputId }) {
  return (
    <>
      <RenderMeElement inputId={inputId}>
    </>
  );
}

Answer 1

您可以在 React JS 中使用条件渲染。这应该对你有用

Parent.js

import {useState} from 'react';
import ChildA from './ChildA';
import ChildB from './ChildB';

export function Parent() {
  const [buttonId, setButtonId] = useState(null);
  return (
    <>
      <ChildA buttonId={buttonId} onClick={(id) => setButtonId(id)} />
      <ChildB inputId={buttonId} />
    </>
  );
}

ChildA.js

  function ChildA(props) {
  const { buttonId, onClick } = props;
  return (
    <>
      <button key='1' onClick={() => onClick(1)}>Button 1</button>
      <button key='2' onClick={() => onClick(2)}>Button 2</button>
      <button key='3' onClick={() => onClick(3)}>Button 3</button>
      <button key='4' onClick={() => onClick(4)}>Button 4</button>
      <button key='5' onClick={() => onClick(null)}>Reset Button</button>
      {!buttonId && <div>Do Not render this when button is pressed</div>}
    </>
  );
}
export default ChildA;

ChildB.js

function ChildB({ inputId }) {
  return (
    <>
      {inputId && <div>RenderMeElement when the inputId {inputId} is not empty</div>}
      
    </>
  );
}
export default ChildB;

请注意，我已将 onClick 事件从

onClick={onClick(1)}

更改为

onClick={() => onClick(1)}

。这是 React 的官方文档对其进行了解释。

我希望这有帮助。