如何在其他React组件中使用Scanner组件并获取其data值传递给Order组件

步骤1：改造Scanner组件，支持向外传递扫描数据 #

原Scanner组件的扫描结果存储在内部state，父组件无法直接获取，我们新增一个回调props用于回传数据，同时清理无效导入：

// Scanner.js
import React from "react";
import BarcodeScannerComponent from "react-qr-barcode-scanner";

// 新增onScanSuccess回调props用于接收父组件传递的方法
function Scanner({ onScanSuccess }) {
  const [data, setData] = React.useState("Not Found");

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) {
            const scanText = result.text
            setData(scanText);
            // 扫描到结果时调用父组件传入的回调，传递扫描数据
            onScanSuccess?.(scanText)
          } else {
            setData("Not Found");
          }
        }}
      />
      <p>{data}</p>
    </>
  );
}
export default Scanner;

步骤2：父组件实现点击加载Scanner、接收数据并传递给Order组件 #

通过状态控制Scanner组件的挂载/卸载，完全符合React Hooks规则：只有Scanner组件被挂载时才会执行它内部的Hooks，且所有Hooks始终在对应组件顶层调用，不会触发规则违反报错：

// 父组件示例
import React, { useState } from 'react'
import Scanner from './Scanner'
import Order from './Order'

function ParentComponent() {
  // 控制Scanner组件是否加载
  const [showScanner, setShowScanner] = useState(false)
  // 存储扫描结果，用于传递给Order组件
  const [scannedCode, setScannedCode] = useState('')

  const handleScanSuccess = (code) => {
    setScannedCode(code)
    // 可选配置：扫描成功后自动关闭扫描器
    setShowScanner(false)
  }

  return (
    <div>
      <button onClick={() => setShowScanner(true)}>启动扫码</button>
      {/* 条件渲染Scanner组件，只有showScanner为true时才挂载组件 */}
      {showScanner && <Scanner onScanSuccess={handleScanSuccess} />}
      {/* 将扫描结果直接传递给Order组件使用 */}
      <Order scannedCode={scannedCode} />
    </div>
  )
}

export default ParentComponent

原Hook规则违反原因说明 #

之前触发报错大概率是在事件回调/条件判断内直接调用了Scanner的组件函数，或在条件分支内声明Hook。本方案通过状态控制组件挂载的方式，所有Hook均在对应组件顶层执行，完全符合React Hooks使用规则。

内容的提问来源于stack exchange，提问作者Andi Cerki