React JSX类库导出不起作用

我正处于将非jsx React项目移动到JSX并努力工作的初期阶段。React JSX类库导出不起作用

我已经设法创建了一个简单的JSX组件，它是在从index.jsx文件创建时工作的，但我试图与现有代码集成，并且希望将“传统”React类与我的新的JSX类。

我Dropdown.jsx代码如下所示：

class Dropdown extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
     value: null, 
    }; 
} 

render() { 
    return <div> 
     <select name="carlist" form="carform"> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
    </div>; 
    } 
} 

export default Dropdown;

我试图实例化组件做出反应，从如下（这是怎么了我的大部分遗产的代码看起来）

HTML文件

<!DOCTYPE html> 
<html lang="en" xmlns=""> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 

<div id="app"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 

<script src="dist/react-bundle.js"></script> 

<script type="application/javascript"> 

    ReactDOM.render(
     React.createElement(Dropdown, {}, null), 
     document.getElementById('app') 
    ); 

</script> 

</body> 
</html>`

而且我webpack.config.js文件如下：

var path = require('path') ; 

module.exports = { 
entry: { 
    react: [ './src/Dropdown.jsx' ] 
}, 
output: { 
    library: "Dropdown", 
    libraryTarget: "umd", 
    path: path.join(__dirname, 'dist'), 
    filename: '[name]-bundle.js' 
}, 
devtool: 'source-map', 
module: { 
    loaders: 
     [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loaders: [ 
        'babel-loader' 
       ] 
      }, 
      { 
       test: /\.jsx$/, 
       exclude: /node_modules/, 
       loaders: [ 
        'babel-loader' 
       ] 
      } 

     ] 
} 
};

我已经做了资源的公平位试图解决这个问题，最后一个是将'library'和'libraryTarget'设置添加到配置文件中。

脚本似乎已被承认的下拉类（即它不是一个类未找到类型错误而失败），但我得到了folloiwng代替：

Warning: React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components).

我知道，从实例化时，这一类的工作index.jsx文件

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

import Dropdown from './Dropdown'; 

ReactDOM.render(
<Dropdown />, 
document.getElementById('app') 
); 

export default Dropdown ;

我是否以错误的方式接近这种迁移？ - 我原以为我可以将旧的React代码与JSX输出混合搭配...？

提前

来源

2017-10-15 NEIL STRONG

你有没有导入React Dropdown.jsx我知道这很明显，但只是想确认bcoz多数民众赞成多数民众赞成在文件中没有显示 –

尝试导入反应在文件的顶部导入从'反应'反应; –

感谢Piyush。我没有，但是它在发送时没有抱怨。我已经添加了导入。 –

非常感谢与的WebPack的事情是，你所创建的类被正确地从外界封装。您正在收到的错误

Warning: React.createElement: type should not be null, undefined, boolean, or number. 
It should be a string (for DOM elements) or a ReactClass (for composite components).

是当React无法在任何地方找到类声明时发生的错误。同时，我建议你按照正确的方式，并在index.jsx文件实例化，你仍然可以使这项工作在Dropdown.jsx这样黑客

window.Dropdown = Dropdown

这将确保您的外部非webpack编译的javascript可以看到下拉类。但这是不好的事情，我真的建议你坚持使用index.jsx文件，因为它可以防止你将类和库从全局名称空间及其最佳实践中暴露出来。

来源

2017-10-15 15:56:15 Maru

谢谢玛娄。我很欣赏这不是最佳做法，但我正在尝试将一些新代码整合到现有的“旧式”React项目中。它不使用JSX。我已经尝试了您的建议，在Dropdown类定义的末尾添加了您建议的行。我可以看到捆绑文件中的新行，如果我在捆绑文件中断，我可以看到它正在执行该行，但我仍然从createElement（）收到同样的错误 –

我的歉词Maru - 我删除了库：“Dropdown”， libraryTarget：“umd”，来自webpack配置的行，它的工作原理！非常感谢！ –

React JSX类库导出不起作用

回答

相关问题