React新手求助：如何在Framer代码覆写中识别点击目标元素？

你当前代码用全局共享的store控制所有组件的border状态，导致点击任何一张图片，所有应用该覆写的组件都会同步变化。要实现仅给点击的元素添加边框，有两种实用方案：

方案1：每个组件独立维护选中状态（支持多选） #

把全局store换成React的useState，让每个图片组件单独管理自身的选中状态，组件间状态互不干扰：

import type { ComponentType } from "react"
import { useState } from "react"

export function setBorder(Component): ComponentType {
    return (props) => {
        // 每个组件私有选中状态
        const [isSelected, setIsSelected] = useState(false)

        return (
            <Component
                {...props}
                animate={{
                    border: isSelected ? "3px solid rgba(255, 255, 255)" : ""
                }}
                onClick={() => {
                    setIsSelected(!isSelected)
                }}
            />
        )
    }
}

方案2：全局控制单选（仅一张图片有边框） #

如果需要实现「同一时间仅选中一张图片」，可以在store中存储当前选中元素的唯一标识（Framer会自动给每个组件分配componentId并传入props），每个组件通过自身id判断是否需要显示边框：

import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStore = createStore({
    selectedId: null,
})

export function setBorder(Component): ComponentType {
    return (props) => {
        const [store, setStore] = useStore()
        const currentId = props.componentId
        const isSelected = store.selectedId === currentId

        return (
            <Component
                {...props}
                animate={{
                    border: isSelected ? "3px solid rgba(255, 255, 255)" : ""
                }}
                onClick={() => {
                    // 点击时切换选中状态：已选中则取消，未选中则设为当前组件id
                    setStore({
                        selectedId: isSelected ? null : currentId
                    })
                }}
            />
        )
    }
}

原代码失效的核心原因是全局store的状态被所有组件共享，任何组件触发状态变更都会同步影响所有应用该覆写的元素。上面的方案要么让组件独立管理状态，要么通过唯一标识精准区分目标元素，从而实现你需要的效果。

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