FineUI 官方论坛

标题: FineUI + React 使用 Antd 组件 [打印本页]
作者: 棕榈    时间: 2020-4-10 16:34
标题: FineUI + React 使用 Antd 组件
本帖最后由 棕榈 于 2020-4-10 16:33 编辑

FineUI + React 使用 Antd 组件

[attach]12392[/attach]



在之前我介绍了 Knockout 与 Vue 在 FineUI 中的使用，并对 FineUI 的控件进行了相应的封装，这里我介绍一下在 FineUI 中如何使用 React ，并用 Antd 组件作为示例。

Angular、React、Vue 应该是现今比较流行的JS框架，其中 React 与 Vue 比较相近，都主要关注于 View，你只要有JS与HTML基础，入门还是比较轻松的。

由于使用 React 需要用到 JSX ，JSX 是 React 创建组件的语法糖，在生产环境中需要将其编译成 JS 文件，我这里将介绍在 FineUICore 项目中如何进行配置。

我们这里使用的是 TSX，它是由 Typescript 来编写的 JSX 文件，在 VS 中可以直接编译成JS文件，这里我采用的是 FineUICore 空项目文件，在项目中创建一个 tsconfig.json 文件

  1. {
  2.   "compilerOptions": {
  3.     "noImplicitAny": false,
  4.     "noEmitOnError": true,
  5.     "removeComments": false,
  6.     "jsx": "react",
  7.     "outDir": "wwwroot/js",
  8.     "sourceMap": true,
  9.     "target": "es5"
  10.   },
  11.   "exclude": [
  12.     "node_modules",
  13.     "wwwroot"
  14.   ]
  15. }
复制代码

主要添加了以下两行

  1. "jsx": "react",
  2. "outDir": "wwwroot/js",
复制代码

再添加一个 typings.d.ts 类型定义文件

  1. declare const F;
  2. declare const antd;
  3. declare const React;
  4. declare const ReactDOM;
复制代码

创建一个 React.cshtml 页面，同时再创建一个 React.tsx 文件
在 React.cshtml 文件中引入 react reactdom antd 的JS文件

  1. @section script {
  2.     <script src="~/react/react.production.min.js"></script>
  3.     <script src="~/react/react-dom.production.min.js"></script>
  4.     <script src="~/antd/antd.min.js"></script>
  5.     <script src="~/js/React.js"></script>
  6. }
复制代码

到现在为止配置已完成了，下面的工作就是缩写 react 的代码了
下面是我拷贝 Antd 官网中的示例代码：

  1. const Button = antd.Button;
  2. const Progress = antd.Progress;
  3. const Slider = antd.Slider;
  4. const Steps = antd.Steps;
  5. const Step = Steps.Step;
  6. const Timeline = antd.Timeline;
  7. const Empty = antd.Empty;
  8. const Result = antd.Result;

  10. class App extends React.Component {
  11.     render() {
  12.         return <div>
  13.             <Button type="primary">Primary</Button>
  14.             <Button>Default</Button>
  15.             <Button type="dashed">Dashed</Button>
  16.             <Button type="link">Link</Button>
  17.             <br />
  18.             <br />
  19.             <Progress type="circle" percent={75} />
  20.             <Progress type="circle" percent={70} status="exception" />
  21.             <Progress type="circle" percent={100} />
  22.             <br />
  23.             <br />
  24.             <Slider defaultValue={30} />
  25.             <Slider range defaultValue={[20, 50]} />
  26.             <br />
  27.             <br />
  28.             <Steps current={1}>
  29.                 <Step title="Finished" description="This is a description." />
  30.                 <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
  31.                 <Step title="Waiting" description="This is a description." />
  32.             </Steps>
  33.             <br />
  34.             <br />
  35.             <Timeline>
  36.                 <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  37.                 <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  38.                 <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  39.             </Timeline>
  40.             <br />
  41.             <br />
  42.             <Empty />
  43.             <br />
  44.             <br />
  45.             <Result
  46.                 status="success"
  47.                 title="Successfully Purchased Cloud Server ECS!"
  48.                 subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
  49.                 extra={[
  50.                     <Button type="primary" key="console">
  51.                         Go Console
  52.                     </Button>,
  53.                     <Button key="buy">Buy Again</Button>,
  54.                 ]}
  55.             />
  56.         </div>
  57.     }
  58. }

  60. F.ready(() => {
  61.     ReactDOM.render(<App />, document.getElementById('app'));
  62. });
复制代码



示例项目到知识星球下载











欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/) Powered by Discuz! X3.4