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類庫導出不起作用

回答

相關問題