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;

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

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



示例项目到知识星球下载












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