Question

首先，我刚接触react。因此，我必须创建一个React组件以将HTML附加到SVG，据我的研究react来看，如果创建了一个{用于附加到组件的类和方法（如果我错了，请纠正我）。我创建了一个名为HTML的类，当我尝试加载包含该类的脚本时，显示错误消息，告诉我有意外的令牌。最初，我认为问题不在于插件Svg，所以我在脚本调用中添加了data-plugins参数，并尝试重新加载页面，但错误仍然存在。而且我正在使用CDN反应。

我的问题是什么

我将transform-class-properties附加到组件的方法正确吗？
为什么我的Svg react组件类抛出错误？
如何解决该错误？

脚本调用：

HTML

脚本：

<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"));

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-create-app：https://facebook.github.io/create-react-app/docs/getting-started

将HTML附加到组件和React Component类意外令牌，应}

1 个答案: