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

Question

这里有一个组件

Scanner.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;

我想在另一个组件中使用这个组件，最好是在Button click上。但这是不可能的，因为我违反了React中Hooks的规则。至于使用，我必须使用"数据"。从扫描器组件，然后发送到订单组件。

Answer 1

好啦好啦!现在我知道问题出在哪里了首先我想你们有这两个文件在一个组件，如果是，将是这样。

进口,你的Scanner.js在Order.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");
}}
/>

好运:)