React组件功能划分及showModal函数实现位置咨询

问题场景 #

现有三个React组件：Row、Modal、Table，其中Table组件维护着控制Modal显示的modalOn状态，希望点击Row组件内的show-modal按钮时，将modalOn设为true，询问showModal函数的实现位置。

解决方案 #

showModal函数需要在Table组件中实现，再通过props传递给Row组件使用，具体步骤及修正后的代码如下：

1. 修正Table组件：实现showModal并传递给Row

import Row from "./Row";
import Modal from "./Modal";
import { useState } from 'react';

export default function Table() {
    const [modalOn, setModalOn] = useState(false);

    // 在Table组件内实现showModal函数
    const showModal = () => {
        setModalOn(true);
    };

    return (
        <>
            <div>
                // Some table features
                <Row showModal={showModal}/>
                <Row showModal={showModal}/>
            </div>
            {modalOn && <Modal/>}
        </>
    )
}

2. 修正Row组件：接收props并绑定到按钮事件

// 接收父组件传递的showModal函数
export default function Row({ showModal }) {
    return (
        <>
            <div className="grid grid-4-cols">
                // Here is the cell details
                ...
                // Code below are one of the cell
                <div>
                    {/* React事件采用驼峰式命名：onClick */}
                    <button id="show-modal" type="button" onClick={showModal}></button>
                </div>
                ...
            </div>
        </>
    );
}

关键说明 #

• 状态modalOn由Table组件维护，因此修改该状态的逻辑（showModal函数）必须定义在Table组件内，确保状态的单一数据源。
• 通过props将函数传递给子组件Row，子组件触发该函数即可触发父组件的状态更新。
• 注意修正原代码中的语法错误：组件定义需符合React函数组件规范，事件名需使用React的驼峰式onClick而非原生的onclick，同时闭合未关闭的标签。

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