首页 文章

如何动态地为渲染函数中的每个svg元素设置属性？

提问于
浏览 次
0

我有一个应该渲染美国 Map 的组件：

import * as React from "react";

export class UsMap extends React.Component<{}, {}> {
    constructor(props: IAvatorialMapProps) {
        super(props);
    }

    getStateColor(id: string): string {
        if (id == "Alabama")
            return "rgba(213, 213, 213)";
        else
            return "rgba(156, 156, 156)";
    }

    render() {
        return (<svg className="UsMap" width="580" height="400" xmlns="http://www.w3.org/2000/svg">
            <g>
                <path id="Alabama" d="..."><title>Alabama</title></path>
                .
                .
                .
                <rect id="Washington D.C."><title>Washington D.C.</title></rect>
            </g>
        </svg>);
    }
}

我正在使用与TypeScript的反应来设计我的应用程序 . 我想要做的是根据元素的id（代表所讨论的美国状态）动态设置SVG元素的一些属性（例如填充） . 我能做的是为每个元素显式使用它的id：

<path id="Alabama" fill={this.getStateColor("Alabama")} d="..."><title>Alabama</title></path>

但每次我想改变一些东西时，我都必须手动更改每个路径/ rect元素 . 有没有办法可以动态地将当前元素id传递给getStateColor函数？或者是否有其他方法可以引用每个path / rect元素，以便我可以根据getStateColor定义设置所有美国状态？

reactjs typescript dictionary svg path

1 回答

  • 0

    你目前正在采取的方式是正确的方式 . 由于React确实DOM diffing (or reconciliation)，它实际上并不会在每次发生小的更改时生成整个浏览器DOM，它只会更新现有文档以匹配 render 生成的内容 .

    任何在React之外修改DOM的尝试都无法正常工作，因为React不会知道这些更改并会覆盖它们 .

    回复于

相关问题