如何在其他组件中使用 React 组件？

Question

我这里有这个组件

扫描仪.js

import React, { Component } from "react";
import { render } from "react-dom";
import BarcodeScannerComponent from "react-qr-barcode-scanner";

function Scanner() {
  const [data, setData] = React.useState("Not Found");

  return (
    <>
      <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text);
          else setData("Not Found");
        }}
      />
      <p>{data}</p>
    </>
  );
}
export default Scanner;

我想在另一个组件中使用这个组件，最好是点击按钮。 但这是不可能的，因为我违反了 React 中 Hooks 的规则。 为了使用，我必须使用来自 Scanner 组件的“数据”，然后将其发送到 Order 组件。

Answer 1

好吧！ 所以现在我明白是什么问题了，首先我认为你在一个组件中有这 2 个文件，如果是，它会是这样的。

首先，在 Order.js 组件中导入您的Scanner.js 。 像这样。

import Scanner from "./Scanner";

然后在 order 组件中将其渲染到您想要的任何位置，它会是这样的。

 <div className='form-group'>
          <label htmlFor='palette'>Palette</label>
          <input
            type='text'
            className='form-control'
            id='palette'
            name='palette'
            placeholder={currentOrder.palette}
            value={currentOrder.palette}
            onChange={handleInputChange}
          />
          <Scanner/>
        </div>

就是这样

更新 1

我发现你的代码有问题：

     <BarcodeScannerComponent
        width={500}
        height={500}
        onUpdate={(err, result) => {
          if (result) setData(result.text);
          else setData("Not Found"); // you don't need else in this position. it would be as follow.
         setData("Not Found");
        }}
      />

祝你好运：）