时间戳

首页 > 解决方案 > 将引导程序添加到 ReactJS

reactjs - 将引导程序添加到 ReactJS

问题描述

我是 React 的新手，正在尝试将 Bootstrap 添加到我的项目中。我按照以下教程创建了我的第一个应用程序。

https://docs.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2017

然后我尝试通过 npm install 从官方站点添加 Bootstrap 并将代码的导入行添加到 app.tsx 文件中：

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

我还在我的包中添加了“react-bootstrap”：“^0.32.4”。但是，当我尝试向我的 app.tsx 文件添加按钮时，出现错误，即

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

错误：构建：JSX 表达式必须有一个父元素。TS17004 (TS) 除非提供了“--jsx”标志，否则无法使用 JSX。构建：逗号运算符的左侧未使用且没有副作用。

我不确定为什么会发生这种情况。

标签： reactjsreact-bootstrap

解决方案

JSX 表达式必须有一个父元素。TS17004 (TS)。

当您在return(). 要摆脱这种情况，您可以将所有元素包装在<div>标签内。

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

class Hello extends React.Component {
    render() {
        return (
          <div>
            <Button bsStyle="primary">Primary</Button>
            <h1>Welcome to React!!</h1>
         </div>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

或者，从 React 16 开始，有一个叫做<React.Fragments>. 这是一种更好的方法，因为您不需要添加额外的 dom 节点。

var React = require('react');
var ReactDOM = require('react-dom');
import { Button } from 'react-bootstrap';

class Hello extends React.Component {
    render() {
        return (
          <React.Fragment>
            <Button bsStyle="primary">Primary</Button>
            <h1>Welcome to React!!</h1>
         </React.Fragment>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

而且，我还想提一提：你不需要使用 node 的 require 语法，你可以使用importES6。

推荐阅读