Reactjs D3 React-使用动态类名或选择器在元素映射中选择元素：未能执行'；querySelectorAll'；

我已经使用SVG和D3编写了一些代码，当我使用它在DOM中创建/选择一个元素时，这些代码会起作用

selectorAll.js:7未捕获的DomeException:未能对“元素”执行“querySelectorAll”：“.2ec41507-5bc3-46d8-aa9e-c1a1bdd87573”不是有效的选择器

以下是有效的代码：

useffect（（）=>{
nodes.forEach（（el，idx）=>{
常量svg=d3
.select（svgRefs.current[idx]）
.attr（'viewBox'，'0 0${availablehorizontalspace}${availablehorizontalspace}`）；
常量行=d3.line（）
//此处返回的数字是每个点的x位置
.x（（值，索引）=>（AvailableHorizontalSpace/（data.length-1））*索引）
//此处返回的数字是每个点的y位置
.y（（值）=>数字（值））；
svg.selectAll（'path'）.data（[data]）.join（'path'）.attr（'d'，（value）=>line（value））；
});
}，[rects]）；
...
{nodes.map（（el，idx）=>(
{svgRefs.current[idx]=ref；}
样式={{position:'absolute'}}
>
))}

下面是不起作用的代码：

const[nodes，setNodes]=useState（[]）；
...
useffect（（）=>{
nodes.forEach（（el，idx）=>{
常量svg=d3
.select（svgRefs.current[idx]）
.attr（'viewBox'，'0 0${availablehorizontalspace}${availablehorizontalspace}`）；
常量行=d3.line（）
//此处返回的数字是每个点的x位置
.x（（值，索引）=>（AvailableHorizontalSpace/（data.length-1））*索引）
//此处返回的数字是每个点的y位置
.y（（值）=>数字（值））；
svg.select（`.${nodes[idx].id}`）.data（[data]）.join（'path'）.attr（'d'，（value）=>line（value））；
});
}，[rects]）；
...
{nodes.map（（el，idx）=>(
{svgRefs.current[idx]=ref；}
样式={{position:'absolute'}}
>
))}

不同之处在于，我使用类名尝试选择每个

元素，并将

selectAll

的用法更改为

select

我已经检查了ID是否正确，是否匹配。我已经尝试添加引号和更改语法，但它仍然抛出错误

如何使用动态标识符成功选择每个单独的路径

更新： 我发现，如果我将

select

包装在

setTimeout

中，有时这会起作用：

setTimeout（（）=>{
常量行=d3.line（）
//此处返回的数字是每个点的x位置
.x（（值，索引）=>（AvailableHorizontalSpace/（data.length-1））*索引）
//此处返回的数字是每个点的y位置
.y（（值）=>数字（值））；
svg.select（`.${nodes[idx].id}`）.data（[data]）.join（'path'）.attr（'d'，（value）=>line（value））；
}, 300);

在您的情况下，类名不是一个好的选择器。 向元素添加属性（例如

节点id

）：

<path className="node" nodeId={nodes[idx].id} ... />

UPD：由于要处理TypeScript，这里有一个解决方法：

import { SVGProps } from 'react';

interface INodePathWithId extends SVGProps<SVGPathElement> {
  nodeId: number;
} 

const NodePathWithId = (props : INodePathWithId) => (<path {...props}/>);

...
<NodePathWithId nodeId={1} fill="red" stroke="blue" />
...

从'react'导入{SVGProps}；
接口INodePathWithId扩展了SVGProps{
nodeId：数字；
} 
const NodePathWithId=（道具：INodePathWithId）=>（）；
...
...

谢谢-我已经尝试过了，但是TypeScript抛出了一个错误：

类型“{nodeId:string；stroke:string；fill:string；}”不能分配给类型“SVGProps”。“SVGProps”类型上不存在属性“nodeId”

。您知道是否支持

nodeId

的类型吗？您可以定义

SVGPathElementWidthId

。。。（还有一个讨厌打字脚本的理由）。。。或者将其转换为

any

谢谢！是的，但是如果道具不存在，我怎么能投它呢

，

不起作用：（@Mr.Robot）请查看我答案的更新。希望有帮助…这起作用！！谢谢！！虽然我不得不将

选择
更改为
选择全部
，然后我也遇到了这个问题，但第二个答案对我有效：
import { SVGProps } from 'react';

interface INodePathWithId extends SVGProps<SVGPathElement> {
  nodeId: number;
} 

const NodePathWithId = (props : INodePathWithId) => (<path {...props}/>);

...
<NodePathWithId nodeId={1} fill="red" stroke="blue" />
...