bootstrap下拉列表在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

再次造成您的困惑，我深表歉意。 我刚刚发现我没有导入bootstrap js文件。