0

我在 React 中使用标记库完成了非常简单的降价预览器。起初我通过在我的 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"));
4

3 回答 3

2

当使用 JS 模块时，Babel 只处理import语句到 CommonJSrequire调用的转换——你仍然需要某种模块加载器来实际处理它们的链接。

您可以为此使用的一些工具示例包括：

也就是说，由于您将库作为脚本标签包含在您的页面中，因此完全删除导入可能会解决您的问题 - 这种方法确实不能很好地扩展，所以我鼓励您查看上述工具！

于 2016-11-28T10:32:44.073 回答
1

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

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

您可能需要考虑像 create-react-app 这样的样板 - 非常适合开始使用专注于学习反应的环境。

创建反应应用

于 2016-11-28T10:36:23.747 回答
1

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

为了安装它们运行

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

您可以稍后将它们导入为

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

这是一个简单的教程，您可以按照它来使用 webpack 设置您的反应代码

于 2016-11-28T10:42:37.330 回答