À l'aide de Réagir avec Bootstrap Bascule

Je veux utiliser bootstrap bascule à l'intérieur d'un Réagir composant. Cependant régulièrement case à cocher est affichée à la place d'un élément de style. Comment pourrait être fixé?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script type="text/jsx">
var WordCheckBox = React.createClass({
render: function() {
return (
<div className="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off" />
option1
</label>
</div>
);
}
});
React.render(
<WordCheckBox />,
document.getElementById('content')
);
</script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<!--doesn't work. checkbox instead of toogle shown-->
<div id="content"> </div>
<!--works-->
<div class="checkbox">
<label>
<input type="checkbox" data-toggle="toggle" data-on="On" data-off="Off">
<span>option2</span>
</label>
</div>
<!--works-->
<div class="checkbox" data-reactid=".0">
<label data-reactid=".0.0">
<input type="checkbox" data-toggle="toggle"
data-on="On" data-off="Off"
data-reactid=".0.0.0">
<span data-reactid=".0.0.1">option3</span>
</label>
</div>
</body>
</html>
Essayez d'utiliser Réagir Bootstrap: réagissent-bootstrap.github.io
je ne peux pas l'élément à bascule.
En regardant la démo, il semble que le code qui manipule le DOM, ce qui signifie qu'il n'est pas facilement compatible avec ReactJS tel qu'il est actuellement rédigé.
que c'est triste. Puis-je spécifier l'ordre dans avec ils vont manipuler le DOM ou faire autre chose d'intelligent?
Pas de. Si vous regardez @David suggestion, vous verrez que cela génère du code HTML qui correspond exactement à ce que Bootstrap aurait fait pour un composant donné. Il n'est pas manipulé/transformé au moment de l'exécution.

OriginalL'auteur Stan Kurilin | 2015-04-14