Question

我在React中使用标记库完成了非常简单的markdown预览器。起初我是通过在

中向我的Index.html添加脚本来实现的

<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@latest/dist/react.js">
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js">
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
    <script type="text/babel" src="script.js" ></script>
</body>

一切正常，但当我删除字符串react.js和react-dom.js，并将它们添加到script.js中时，我在控制台中看到一个错误：

import React from "react.min"
import ReactDOM from "react-dom.min"
class Input extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        _text: "",
    };
}

handleChange(e) {
    this.setState({
        _text: marked(e.target.value)
    });
}

createMarkup() {
    let outPutVal = this.state._text ? this.state._text : this.state._init;
    return {
        __html: outPutVal
    };
}

render() {
    return (<form className="headDiv">
            <textarea onChange={this.handleChange.bind(this)}
                      placeholder="Remember, be nice!"
                      id="inputText" rows="25" cols="100">{this.state._text}</textarea>
        <output id="outputText" dangerouslySetInnerHTML={this.createMarkup()} />
    </form>);
 }
}

ReactDOM.render(<Input/>, document.getElementById("root"));

Answer 1

使用JS模块时，Babel只处理import语句到CommonJS require调用的转换 - 您仍需要某种模块加载器来实际处理它们的连接。

您可以使用的一些工具示例如下：

也就是说，由于您在页面中将库作为脚本标记包含在内，因此完全删除导入可能会解决您的问题 - 这种方法实际上并不能很好地扩展，所以我建议您研究一下以上工具！

Answer 2

使用npm安装后，您通常只需导入如下（无.min）：

import React from 'react';
import ReactDOM from 'react-dom';

你可能想要考虑一个类似于create-react-app的样板 - 开始使用一个专注于学习反应的环境。

create-react-app

Answer 3

要在import中使用JSX code，您需要使用webpack或browserify。您还需要在导入之前使用npm安装这些模块

为了安装它们，请运行

npm install -S react-dom
npm install -S react

您稍后可以将其导入为

import React from 'react';
import ReactDOM from 'react-dom';

Here是一个简单的教程，您可以使用webpack

设置您的反应代码

我对ES6中的导入有什么误解？

3 个答案: