React + react-query + bootstrap

DropDown.css

.DropDown-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 100;
}
.DropDown.open .DropDown-backdrop{
	display: block;
}

DropDown.jsx

/** @jsx React.DOM */
var React = require("react");
var VError = require("verror");
var $ = require("react-query");

var DropDown = React.createClass({
    propTypes: {
        children: function validateChildren(props, propName, componentName) {
            var $children = $(props.children);
            if($children.size() !== 1) {
                return new Error("Children shoult contain exactly one element.");
            }
            if($children.find(".dropdown").size() !== 1) {
                return new Error("Children should contain exactly one .dropdown element.");
            }
            if($children.find(".dropdown-toggle").size() !== 1) {
                return new Error("Children should contain exactly one .dropdown-toggle element.");
            }
            if($children.find(".dropdown-menu").size() !== 1) {
                return new Error("Children should contain exactly one .dropdown-menu element.");
            }
        },
        initiallyToggled: React.PropTypes.bool,
    },
    getInitialState: function getInitialState() {
        return { toggled: this.props.initiallyToggled };
    },
    getDefaultProps: function getDefaultProps() {
        return { initiallyToggled: false };
    },
    _toggle: function _toggle() {
        this.setState({ toggled: !this.state.toggled });
    },
    render: function render() {
        var _this = this;
        return $(this.props.children).replace({
            ".dropdown": function() { return $(this).toggleClass("open", _this.state.toggled); },
            ".dropdown-toggle": function() { return $(this).props({ onClick: _this._toggle }); },
            ".dropdown-backdrop": function() { return $(this).props({ onClick: _this._toggle }); },
        }).addClass("DropDown").append(
            <div className="DropDown-backdrop" onClick={this._toggle} />
        ).single();
    },
});

module.exports = DropDown;

Usage.jsx

/** @jsx React.DOM */
var React = require("react");
var DropDown = require("./DropDown");

React.renderComponent(<DropDown>
  <div className="dropdown">
    <a className="dropdown-toggle">Toggle</a>
    <ul className="dropdown-menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
</DropDown>, document.body);