Reactjs 从普通方法调用组件？

我想做一件非常简单的事情，从功能组件中的函数调用组件。 例如：

const BillingScreen = (props) => {

    const [barCodes, setBarCodes] = useState(new Set());
    const [billItems, setBillItems] = useState(new Map());

    useEffect(() => {
        barCodes.forEach(barCode => {
            if (!billItems.has(barCode)) {
                setBillItems(billItems => new Map(billItems).set(barCode, {...itemForBarcode, quantity : 1, price : itemForBarcode.price, totalPrice : itemForBarcode.price}))
            }
        })
    }, [barCodes, billItems])

    const addBarCode = ({barCodeType, barCode}) => {
        
        if (barCodes.has(barCode)) {
            //TODO need to call this when this condition passes. 
            return <QuantityModelScreen isUpdate={true} item={billItems.get(barCode)} handlSubmit={updateProduct}/> 
        }
        else {
            setBarCodes(barCodes => new Set(barCodes).add(barCode))
        }
    }

    
    return (
        <View style = {styles.container}>
            <View style = {styles.barCode}>
                <BarCodeScannerComponent addBarCode = {(barCode) => addBarCode(barCode)} />
            </View>
    )
} 

const BillingScreen=（道具）=>{
常量[条形码，立根条形码]=使用状态（新集合（））；
const[billItems，setBillItems]=useState（newmap（））；
useffect（（）=>{
条形码。forEach（条形码=>{
如果（！billItems.has（条形码））{
setBillItems（billItems=>new Map（billItems）.set（条形码，{…itemForBarcode，数量：1，价格：itemForBarcode.price，总价：itemForBarcode.price}））
}
})
}，[条形码、billItems]）
常量addBarCode=（{barCodeType，barCode}）=>{
if（条形码has（条形码））{
//当此条件通过时，TODO需要调用此函数。
返回
}
否则{
设置条形码（条形码=>新设置（条形码）。添加（条形码））
}
}
返回(
添加条形码（条形码）}/>
)
} 

我想在if条件进入块时调用组件

这可能是我错过的一件非常基本的事情：）

---

TIA.：）

我添加了一个状态“isBar”来管理是否显示组件。 在“if”语句中，我将“isBar”设置为true（或false…）， 至少-我只在变量'isBar'为真时才显示组件

const BillingScreen = (props) => {

const [barCodes, setBarCodes] = useState(new Set());
const [billItems, setBillItems] = useState(new Map());
const [isBar, setIsBar] = useState(false);

useEffect(() => {
    barCodes.forEach(barCode => {
        if (!billItems.has(barCode)) {
            setBillItems(billItems => new Map(billItems).set(barCode, {...itemForBarcode, quantity : 1, price : itemForBarcode.price, totalPrice : itemForBarcode.price}))
        }
    })
}, [barCodes, billItems])

const addBarCode = ({barCodeType, barCode}) => {
    
    if (barCodes.has(barCode)) {
        setIsBar(true);
        return <QuantityModelScreen isUpdate={true} item={billItems.get(barCode)} handlSubmit={updateProduct}/> 
    }
    else {
        setIsBar(false)
        setBarCodes(barCodes => new Set(barCodes).add(barCode))
    }
}


return (
    <View style = {styles.container}>
        <View style = {styles.barCode}>
            {isBar &&<yourComponent/>}
            <BarCodeScannerComponent addBarCode = {(barCode) => addBarCode(barCode)} />
        </View>
)

const BillingScreen=（道具）=>{
常量[条形码，立根条形码]=使用状态（新集合（））；
const[billItems，setBillItems]=useState（newmap（））；
const[isBar，setIsBar]=useState（false）；
useffect（（）=>{
条形码。forEach（条形码=>{
如果（！billItems.has（条形码））{
setBillItems（billItems=>new Map（billItems）.set（条形码，{…itemForBarcode，数量：1，价格：itemForBarcode.price，总价：itemForBarcode.price}））
}
})
}，[条形码、billItems]）
常量addBarCode=（{barCodeType，barCode}）=>{
if（条形码has（条形码））{
setIsBar（真）；
返回
}
否则{
setIsBar（假）
设置条形码（条形码=>新设置（条形码）。添加（条形码））
}
}
返回(
{isBar&&}
添加条形码（条形码）}/>
)

---

}

需要查看BarCodeScannerComponent的实现，只需使用如上所示的参数调用addBarCode（）方法即可。我无权在此处发布该代码：）似乎缺少一些代码。。。哪里定义了

updateProduct

？什么是

addBarCode

将JSX返回到？在

BarCodeScannerComponent

的

addBarCode

回调属性中，您似乎还没有将

barCodeType

值传递给

addBarCode

。当你说“调用组件”时，你能更具体一点吗？在react中，您不“调用”组件，它们被呈现到返回的JSX中。@drewrese，我们也可以忽略缺失的代码和缺失的参数（尽管，您在上述所有观察中都是正确的：）“addBarCode将JSX返回到何处？”这一问题是本节目的主要吸引力所在。addBarCode是从调用的，它不需要返回任何内容。我只是不知道在这里该怎么办。我只想在满足if条件时从addBarCode（）方法启动另一个组件。（return只带走编译错误，忽略它并提供帮助）TIA.当满足if条件时，“从addBarCode（）方法启动另一个组件”是什么意思？如果

addBarCode

不需要返回任何内容，那么可能需要返回

null

以提前返回。或者您正在尝试在某个地方呈现返回的JSX？现在还不清楚你想做什么。在react中，您不直接“调用”组件，而是将它们传递给react，react处理“调用”和生命周期。如果我们希望在内部使用数据（例如，addBarCode方法中的条形码和条形码类型），该怎么办？您可以按属性发送数据，如下所示：并在组件中用作“props.isBar”更清楚，在addBarCode（）方法中，我发现有一个变量在执行某些操作，即barCode。现在我希望这个条形码值被传递到内部。请记住，barCode变量是addBarCode（）方法的本地变量。barCode不是loacl变量，因为它是从全局状态传递的。您的父组件中有全局状态“barCode”，因此您可以在其子组件“yourComponent”和“BarCodeScannerComponent”中使用它。更改父项时，它将在子项中自动更改。