1

我正在尝试使用 Lerna 和 React 构建概念验证。

这是存储库：

https://github.com/SeanPlusPlus/lerna-react

到目前为止，如果您运行以下命令，则上述方法有效：

git clone git@github.com:SeanPlusPlus/lerna-react.git
cd lerna-react
lerna bootstrap
cd packages/app
yarn start

在packages/app/src/App.js我正在导入和渲染Headline组件时（注意，我曾经create-react-app创建过这个目录）：

import React, { Component } from 'react';
import logo from './logo.svg';
import Headline from 'headline';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        { Headline }
      </div>
    );
  }
}

export default App;

中的Headline组件packages/headline/index.jsx正在使用该React.createElement功能：

import React from 'react';

// const Headline = () => (
//   <h1>Hello Lerna + React</h1>
// )

const Headline = React.createElement('div', null,
  React.createElement('h1', null, 'Hello Lerna')
)

export default Headline

而且，如您所见，返回 JSX 的函数被注释掉了。

...现在...如果我更新此文件以返回 JSX：

import React from 'react';

const Headline = () => (
  <h1>Hello Lerna + React</h1>
)

export default Headline

我的应用返回此错误：

Failed to compile.

../headline/index.jsx
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type.
|
| const Headline = () => (
|   <h1>Hello Lerna + React</h1>
| )

如何从我的Headline组件中导出 JSX？

4

1 回答 1

2

知道了！

https://github.com/SeanPlusPlus/lerna-react/tree/react-babel

我需要安装 babel 并编译我的headline组件。

于 2018-05-04T19:24:33.867 回答