javascript - 将 HTML 附加到组件和 React Component 类意外标记，预期 }

Question

首先，我刚开始使用 react。因此，我必须创建一个 React 组件，用于将 HTML 附加到 SVG 中，并且就我在 react 中的研究而言，只能附加 HTML，如果您创建一个用于附加到组件的类和方法(如果我错了，请纠正我)。我创建了名为 Svg 的类，当我尝试加载包含该类的脚本时，会显示一条错误，告诉我存在意外标记。起初我认为问题出在没有插件 transform-class-properties 所以我将 data-plugins 参数添加到我的脚本调用中并尝试重新加载页面，但错误仍然存​​在。我正在使用 CDN React。

我的问题是什么:

• 我将 HTML 附加到组件的方法正确吗？
• 为什么我的 Svg React 组件类会抛出错误？
• 如何解决该错误？

脚本调用:

<script charset="utf-8"
      type="text/babel"
      data-plugins="transform-class-properties"
      data-presets="react, es2015, stage-2" 
      src="js/designer/startupMethods.jsx"
></script>

脚本:

class Svg extends React.Component {
    constructor() {
        super();

        this.displayData = [];

        this.state = {
            showdata: this.displayData,
            postVal: ""
        };

        this.appendData = this.appendData.bind(this);
        this.prependData = this.prependData.bind(this);
        this.handleChange = this.handleChange.bind(this);
    };

    appendData(html) {
        this.displayData.push();
        this.setState({
            showdata: this.displaydata,
            postVal: ""
        });
    }

    prependData(html) {
        this.displayData.unshift(html);
        this.setState({
            showdata: this.displayData,
            postVal: ""
        });
    }

    handleChange(e) {
        let getTextAreaValue = e.target.value;
        this.setState({
            postVal: getTextAreaValue
        });
    }

    render() {
        return(
            <p>Test</p>
        );
    }
}

ReactDOM.render(<Svg />, document.getElementById("svg-containter"));

抛出错误:

SyntaxError: file:///C:/Users/jans/Desktop/novAMS/demo/js/designer/startupMethods.jsx: Unexpected token, expected } (11:18)
   9 | 
  10 | class Svg extends React.Component {
> 11 |     constructor() {
     |                   ^
  12 |         super();
  13 | 
  14 |         this.displayData = [];

Answer 1

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin> 
</script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" 
   crossorigin></script>

 <!-- Load our React component. -->
<script src="js/designer/startupMethods.jsx"></script>

组件 Svg 没问题。我在这里查了一下https://stackblitz.com/edit/react-grd52e

您在这里有一个链接，如何向页面 https://reactjs.org/docs/add-react-to-a-website.html 添加 react

我建议使用React-create-app:https://facebook.github.io/create-react-app/docs/getting-started