引导下拉列表在 SVG 中不起作用？

Question

... code omitted
import 'bootstrap/dist/css/bootstrap.min.css';
const margin = { top: 200, right: 55, bottom: 100, left: 180};
const width = 1250 - margin.left - margin.right;
const height = 800 - margin.top - margin.bottom;

class Graphics extends Component {
constructor(props) {
super(props);
}

componentDidMount() {
this.svg = d3.select(this.refs.container)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr( "transform", "translate(" + margin.left + "," + margin.top + ")");
this.renderOptions();
}

componentDidUpdate(){
this.renderOptions();
}

renderOptions(){
const keys = ["cozy","luxury","loud","modern"];
const container = d3.select(this.refs.container)
.append('g')
.attr('transform','translate(100,100)')
.append('foreignObject')
.attr('width','200px')
.attr('height','200px')
.append('xhtml:div')
.attr('class','dropdown');
container.append('xhtml:button')
.attr('class','btn btn-primary dropdown-toggle')
.attr('id','dropdownMenuButton')
.attr('type','button')
.attr('data-toggle','dropdown')
.html('Select mood')
.append('xhtml:span')
.attr('class','caret')
container.append('xhtml:div')
.attr('class','dropdown-menu')
.attr('aria-labelledby','dropdownMenuButton')
.selectAll('option')
.data(keys)
.enter()
.append('xhtml:a')
.attr('class','dropdown-item')
.html( d => d )
}
render() {
return (
<main>
<svg ref="container">
</svg>
</main>
)
}

}

我正在尝试在 svg 中附加引导程序的下拉菜单，但我不确定为什么它不起作用。引导程序的按钮显示，但当我单击该按钮时没有任何反应。甚至有可能让它在 svg 中工作吗？还是我应该在外面做？

已更新 - 对于不清楚的问题，深表歉意。 this.refs.container 指的是 <svg ref="container">它是 react 的 dom 节点.svg 本身没有问题，因为我在 svg 中看到所有内容以及下拉按钮。 你也可以忽略变换。从@Shashank给出的示例来看，它肯定有效，但我想知道为什么尽管代码相同，但它在我的应用程序上没有。下面是与该问题相关的其他代码。

Answer 1

我再次为给您带来困惑而道歉。我刚刚发现我没有导入引导 js 文件。