“您可能需要一个适当的加载程序来处理此文件类型”，并使用bsb react模板。

Question

我有一个文件View.js，它包含一个无状态组件：

import Button from 'material-ui/Button';
import React from 'react';

const View = (props) => ( 
  <div>
    <Button variant="raised" >
      {props.name}
    </Button>
  </div>
);

export default View;

然后，我编写了一个包装器ViewWrapper.re，以便与合理性进行互操作。

[@bs.module] external viewJS : ReasonReact.reactClass = "./View";

let make = (~name: string, children) =>
  ReasonReact.wrapJsForReason(
    ~reactClass=viewJS,
    ~props={"name": name },
    children
  );

然后将包装器添加到index.re中

ReactDOMRe.renderToElementWithId(<Component1 message="Hello!" />, "index1");
ReactDOMRe.renderToElementWithId(<Component2 greeting="Hello!" />, "index2");
ReactDOMRe.renderToElementWithId(<ViewWrapper name="Material" />, "index2");

编译器抱怨：

ERROR in ./src/View.js
Module parse failed: Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| const View = (props) => (
|   <div>
|     <Button variant="raised" >
|       {props.name}
 @ ./src/ViewWrapper.bs.js 4:11-28
 @ ./src/Index.bs.js

我做错了什么？

更新.我创建了我的理性项目

bsb -init my-react-app -theme react

命令。

我将View.js添加到项目中：

​

bsconfig.js看起来如下：

/* This is the BuckleScript configuration file. Note that this is a comment;
  BuckleScript comes with a JSON parser that supports comments and trailing
  comma. If this screws with your editor highlighting, please tell us by filing
  an issue! */
{
  "name": "react-template",
  "reason": {
    "react-jsx": 2
  },
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": [{
    "module": "commonjs",
    "in-source": true
  }],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": [
    "reason-react"
  ],
  "refmt": 3,
  "warnings": {
    "error": "+5"
  }
}

我是不是遗漏了什么？

Answer 1

问题在于(JavaScript) JSX的使用。正如Glenn所说，您需要使用ES6/JSX转换设置Babel，以输出普通的JavaScript。

最简单的方法是将您的项目设置为一个普通的ReactJS项目(创建-反应-应用程序等)。并添加一个bsconfig.json文件(您可以重用您现在拥有的文件)。将现有的ReactJS项目转换为ReasonReact项目实际上非常简单--一旦您在package.json中拥有了bsconfig.json文件和正确的依赖项，您就可以很好地设置了。