1

我有一个文件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，与reasonml进行互操作

[@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"
  }
}

我错过了什么吗？

4

1 回答 1

0

问题是使用（JavaScript）JSX。正如 Glenn 所说，您需要使用 ES6/JSX 转换设置 Babel 以输出纯 JavaScript。

最简单的方法是将您的项目设置为普通的 ReactJS 项目（create-react-app 等）并添加一个bsconfig.json文件（您可以重用现有的文件）。将现有的 ReactJS 项目转变为 ReasonReact 项目实际上非常简单——一旦你拥有了bsconfig.json文件和正确的依赖项package.json，你就基本完成了。

于 2018-04-02T22:59:58.270 回答