在CSHTML中渲染轉譯的ES6

Question

我有

Tutorial.jsx

class ShoppingList extends React.Component {
    render() {
        return (<div>Milk</div>);
    }
}

export default ShoppingList;

webpack.config.js

module.exports = {
    ...
    output: './React/bundle.js',
    ...,
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                query: {                        
                    presets: ['es2015', 'react'],
                }
            }
        ]
    }
}

在我的CMD提示符下，當我運行webpack -w所有內容均為綠色，並且在React文件夾中看到我的bundle.js文件出現在應有的位置。 打開它，我看到了

...
var ShoppingList = function (_React$Component) {
    ...
}
...

所以看起來一切都很好。

現在，我想在_Layout.cshtml文件中呈現ShoppingList。

問題：我該怎么做？ 我已經嘗試了下面的所有方法，並且始終因無效的參數類型或傳入錯誤的元素等而得到React錯誤。 我的CSHTML在下面。

<div id="content1">render here</div>
....
<script src="~/React/bundle.js"></script>
<script>
    ReactDOM.render("ShoppingList", document.getElementById("content1"));
    ReactDOM.render(ShoppingList, document.getElementById("content1"));
    ReactDOM.render(<ShoppingList />, document.getElementById("content1"));
</script>

有人可以讓我知道是否

1. JSX文件中可能沒有ReactDOM.render（），
2. 可以做我想做的事情，即在CSHTML中呈現我的ShoppingList

到目前為止，我得到的最好結果是在DOM資源管理器中看到ShoppingList，但實際上沒有呈現HTML。 出來了<shoppinglist ...></shoppinglist> ，這對我來說似乎是錯誤的。

謝謝。

Answer 1

您應該在輸入文件中包含以下內容：

import ShoppingList from 'path-to/ShoppingList';

ReactDOM.render(<ShoppingList />, document.getElementById("content1"));

在CSHTML頁面中，不需要其他腳本標簽。

---

您的原始示例無效，因為：

1. ShoppingList不會全局公開（默認導出不會使其全局）。
2. 必須先轉換JSX語法（ <ShoppingList /> ），然后才能在HTML頁面中使用。

如果確實需要在CSHTML頁面中使用組件，則可以使該組件成為全局組件：

window.ShoppingList = ShoppingList

在定義組件的文件中。

並使用香草javascript而不是JSX語法：

ReactDOM.render(React.createElement(ShoppingList), document.getElementById("content1"))