Question

我遇到了React-Bootstrap的问题，我已经编写了这段代码而且根本不起作用。

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prueba ReactJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.0/react-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="nav"></div>
<script type="text/babel">
var buttonbarReact =
<ButtonToolbar>

<Button>Default</Button>

<Button bsStyle="primary">Primary</Button>

<Button bsStyle="success">Success</Button>

<Button bsStyle="info">Info</Button>

<Button bsStyle="warning">Warning</Button>

<Button bsStyle="danger">Danger</Button>

<Button bsStyle="link">Link</Button>

</ButtonToolbar>
ReactDOM.render(buttonbarReact,document.getElementById('nav')
);
</script>
</body>
</html>

我从一开始就添加了所有标签，但我无法解决错误。

Answer 1

您的代码中有一些错误。

render方法接受可以从类或函数构造的react组件。此外，该组件需要在以后以资本开始申报。
您必须从ReactBootstrap对象获取ButtonToolbar和Button组件。

有关详细信息，请参阅下面的工作解决方案。

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Prueba ReactJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.0/react-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="nav"></div>
<script type="text/babel">
const { ButtonToolbar, Button } = ReactBootstrap;

var ButtonbarReact = () => (
  <ButtonToolbar>
    <Button>Default</Button>
    <Button bsStyle="primary">Primary</Button>
    <Button bsStyle="success">Success</Button>
    <Button bsStyle="info">Info</Button>
    <Button bsStyle="warning">Warning</Button>
    <Button bsStyle="danger">Danger</Button>
    <Button bsStyle="link">Link</Button>
  </ButtonToolbar>
);

ReactDOM.render(<ButtonbarReact/>, document.getElementById('nav')
);
</script>
</body>
</html>

React-Bootstrap不起作用

1 个答案: