代码之家 › 专栏 › 技术社区 › Joseph

检测函数是否在React中的另一个组件上运行

react-hooks ecmascript-6 reactjs

Joseph · 技术社区 · 4 年前

我需要检测一下 handleSelectProduct console.log('HELO') .我只想输出如果 手选产品 正在被单击。

const ProductComponent = () => {
  const [triggered, setTriggered] = React.useState(0);

  const handleSelectProduct = (event) => {
    setTriggered(c => c + 1);
  };

  return (
    <div>
      Parent
      <button type="button" onClick={handleSelectProduct}>
        Trigger?
      </button>
      <ProductDetailsComponent triggered={triggered} />
    </div>
  );
};

const ProductDetailsComponent = ({ triggered }) => {
  React.useEffect(() => {
    if (triggered) {
      console.log('HELO');
    }
  }, [triggered]);

  return <div>Child</div>;
};

ReactDOM.render(
  <ProductComponent />,
  document.getElementById("root")
);

1 回复 | 直到 4 年前

Mario Vernari 4 年前

我觉得最简单的解决方案是使用 useRef console.log 仅当触发值更改时。

const ProductDetailsComponent = ({ triggered }) => {
  const oldTriggerRef = React.useRef(0);
  React.useEffect(() => {
    if (triggered !== oldTriggerRef.current) {
      oldTriggerRef.current = triggered;
      console.log('HELO');
    }
  }, [triggered]);

  return <div>Child</div>;
};

推荐文章