Visual Studio中无法导入/导出React组件问题求助

嘿，我刚入门React的时候也踩过一模一样的坑！咱们一步步拆解问题，把这个基础操作跑通～

这是新手最容易出错的点，先确保子组件正确导出，父组件正确导入。

举个例子：

子组件文件（比如ChildComponent.jsx） #

import React from 'react';

// 最常用的函数组件写法
export default function ChildComponent() {
  return <div>我是测试子组件👋</div>;
}

// 如果是用类组件（旧版本React常见），写法是这样：
// class ChildComponent extends React.Component {
//   render() {
//     return <div>我是测试子组件👋</div>;
//   }
// }
// export default ChildComponent;

父组件文件（比如ParentComponent.jsx） #

import React from 'react';
// 重点：路径要写对！如果两个文件在同一目录，用./文件名；不在同目录要调整层级
import ChildComponent from './ChildComponent';

export default function ParentComponent() {
  return (
    <div>
      <h2>我是父组件</h2>
      {/* 直接像HTML标签一样用子组件就行 */}
      <ChildComponent />
    </div>
  );
}

因为你是用NuGet在MVC站点里搭的环境，得确保JSX能被正确编译，脚本引用也没问题：

• 配置BundleConfig：打开App_Start/BundleConfig.cs，添加ReactBundle来包含你的组件文件，这样项目会自动编译JSX为浏览器能识别的JS：

bundles.Add(new ReactBundle("~/bundles/react-components").Include(
  "~/Scripts/Components/ChildComponent.jsx",
  "~/Scripts/Components/ParentComponent.jsx"
));

• 在视图里引用脚本：在首页的Index.cshtml里，先引入React核心库，再引用你的组件bundle：

<!-- 先引入React和ReactDOM（开发环境用development版，生产换min版） -->
<script src="~/Scripts/react/react.development.js"></script>
<script src="~/Scripts/react-dom/react-dom.development.js"></script>

<!-- 引用编译后的组件bundle -->
<script src="~/bundles/react-components"></script>

最后要在视图里给React一个挂载节点，并且调用渲染方法：
在Index.cshtml里添加：

<!-- 给React留一个挂载的DOM节点 -->
<div id="react-root"></div>

<script type="text/babel">
  // React 18+ 要用createRoot语法
  const root = ReactDOM.createRoot(document.getElementById('react-root'));
  root.render(<ParentComponent />);

  // 如果是React 17及以下，用旧的render方法：
  // ReactDOM.render(<ParentComponent />, document.getElementById('react-root'));
</script>

• 路径错误：导入子组件时路径写错，会直接导致组件找不到。比如子组件在Scripts/Components，父组件在Scripts，就要用./Components/ChildComponent。
• 漏写导出/导入：子组件没加export default，或者父组件忘了写import ChildComponent from './xxx'，都会报“组件未定义”的错误。
• JSX未编译：如果浏览器控制台报Unexpected token '<'，说明JSX没被转译，检查BundleConfig里的ReactBundle是否配置正确，或者script标签有没有加type="text/babel"。
• React版本不兼容：React 18弃用了旧的ReactDOM.render，用了会有警告，甚至可能影响渲染，记得对应版本用正确的渲染方法。

你可以先对着这些步骤逐一排查，大概率是某个小细节没注意到～

内容的提问来源于stack exchange，提问作者Deepam