reactjs - 如何在 React 中实现人体图？

Question

我是 React 新手，我的任务是实现如下所示的人体图：

我的 App.js 看起来像这样：

import './css/App.css';
import BodyTemplate from "./components/BodyTemplate";

function App() {
    return (
        <div className="app">
            <BodyTemplate/>
        </div>
    );
}

export default App;

BodyTemplate.js 看起来像这样：

import React, {useEffect, useState} from "react";

import "../css/BodyTemplate.css"
import BodyTop from "./front/BodyTop";
import BodyCenter from "./front/BodyCenter";
import BodyBottom from "./front/BottomBody";
import {useStateValue} from "../StateProvider";
import BodyTopLeft from "./front/BodyTopLeft";
import BodyTopRight from "./front/BodyTopRight";
import BodyBottomLeft from "./front/BodyBottomLeft";
import BodyBottomRight from "./front/BodyBottomRight";
import SearchResults from "./SearchResults";
import axios from "axios";
import {actionType} from "../reducer";
import BackBody from "./back/BodyBack";
import BackLeft from "./back/BackLeft";
import BackRight from "./back/BackRight";
import BackTop from "./back/BackTop";
import BodyBack from "./back/BodyBack";

function BodyTemplate() {
    const {state, dispatch} = useStateValue();

    const [selectedPart, setSelectedPart] = useState("");

    useEffect(() => {
        if (state?.bodyPart) {
            setSelectedPart(state?.bodyPart)
        }
    }, [state?.bodyPart])


    const url = "https://marvel-dot-kaisehain01-prod02.appspot.com/symptoms/smartSuggest";
    let searchQuery = {
        api_key: "7D84922B7DC62",
        inputString: selectedPart,
        isCustom: false,
        suggestLimit: 50,
        suggestType: "SYMPTOM",
        practice_id: "10000",
        lang: "en"
    }

    useEffect(() => {
        console.log(selectedPart);
        if (selectedPart) {
            axios.post(url, searchQuery)
                .then(res => {
                    let data = []

                    if (res.status === 200) {
                        data = res.data?.searchData;
                    }

                    dispatch({
                        type: actionType.SET_SEARCH_RESULTS,
                        searchResults: data
                    })
                })
        }
    }, [selectedPart])

    const handleSearchItemClick = (e) =>{
        console.log(e);
    }

    return (
        <>
            <div className="human-body">
                <svg xmlns="http://www.w3.org/2000/svg"
                     width="259.22897"
                     height="350"
                     viewBox="0 0 68.587668 92.604164"
                >
                    <BodyTop/>
                    <BodyTopLeft/>
                    <BodyTopRight/>
                    <BodyCenter/>
                    <BodyBottom/>
                    <BodyBottomLeft/>
                    <BodyBottomRight/>
                    <BackBody/>

                    <BackLeft/>
                    <BackRight/>
                    <BackTop/>
                    <BodyBack/>
                </svg>
            </div>

            <div style={{width: "40vw", marginLeft: "20px"}}>
                <p style={{fontSize: "18px", fontWeight: "500"}}>
                    Search Results for: <b>{selectedPart}</b>
                </p>
                <SearchResults onItemClick = {handleSearchItemClick}  searchType={selectedPart}/>
            </div>
        </>
    )
}

export default BodyTemplate;

BodyTop.js 和 BodyTemplate 中的其他 JS 文件看起来与此类似：

import React from "react";
import {useStateValue} from "../../StateProvider";
import {actionType} from "../../reducer";
import {BodyPartsFront} from "../../enums/BodyParts";

function BodyTop() {

    const {dispatch} = useStateValue()

    const headClick = () => {
        dispatch({
            type: actionType.SET_BODY_PART,
            bodyPart: BodyPartsFront.HEAD
        })
    }

    const faceClick = () => {
        dispatch({
            type: actionType.SET_BODY_PART,
            bodyPart: BodyPartsFront.FACE
        })
    }

    const neckClick = () => {
        dispatch({
            type: actionType.SET_BODY_PART,
            bodyPart: BodyPartsFront.NECK
        })
    }

    return (
        <>
            <path
                id="head"
                d="m 11.671635,6.3585449 -0.0482,-2.59085 4.20648,-2.46806 4.42769,2.95361 -0.0405,1.94408 0.24197,-3.34467 -2.03129,-2.31103004 -2.84508,-0.51629 -2.20423,0.52915 -1.9363,2.63077004 z"
                onClick={headClick}
            />

            <path
                id="face"
                d="m 19.748825,6.7034949 0.0203,-2.20747 -3.96689,-2.7637 -3.74099,2.23559 -0.006,2.63528 -0.60741,0.0403 0.27408,1.82447 0.97635,0.33932 0.44244,2.1802901 1.82222,2.06556 2.03518,-0.0607 1.79223,-1.94408 0.35957,-2.2406601 0.97616,-0.33932 0.25159,-1.78416 z"
                onClick={faceClick}
            />

            <path
                onClick={neckClick}
                id="neck"
                d="m 13.304665,11.910505 1.64975,2.35202 0.74426,2.62159 -1.73486,-1.38354 -0.86649,-2.97104 z m 5.08047,0 -1.64975,2.35202 -0.74538,2.62234 1.73486,-1.38354 0.86649,-2.97104 z"/>

        </>)
}

export default BodyTop;

所有这一切都很好。我现在必须添加一个功能，用户可以在身体部位周围绘制，系统应该自动推断突出显示的身体部位。任何帮助或资源将不胜感激。

标签： reactjs