如何從父組件調用組件function並將其更改為state以在React中渲染子組件

Question

我在從父組件傳遞 state 時遇到問題。 我正在嘗試從我的 ChildComponent 調用 onClick 中我的 ParentComponent 中的 function 以在 ParentComponent 中呈現 ChildComponent。 我是 React Library 的新手，我真的不知道如何實現它。 我試過類似的東西。

父組件：

import React from 'react'
import {ChildComponent, showDialog} from './childComponent'

const ParentComponent = () => {
    return (
        <div>
            <button type='button' onClick={() => showDialog()}>
        </div>
    )
}

export default ParentComponent

子組件：

import {React, useState} from 'react'

const {isOpened, setIsOpened} = useState(false)

function showDialog() {
    setIsOpened(true)
}

function ChildComponent() {
    if (isOpened) {
        return (
            <dialog open></dialog>
        )
    }
}

export {ChildComponent, showDialog}

Answer 1

您應該將激活 function 作為道具傳遞給子組件。 然后在孩子點擊時使用 function。