将第 3 方 React 组件用于 RequireJS、TypeScript 项目的示例

Question

如何将第 3 方 React 组件导入 Typescript TSX 文件？

我有一个相当大的 JavaScript 前端项目，它使用：

打字稿
反应 (0.14.6)
React-dom (0.14.6)
RequireJS

我想添加两个第 3 方 React 组件：

React-DatePicker (https://github.com/Hacker0x01/react-datepicker)
React-Select (https://github.com/JedWatson/react-select)

为了让事情更清楚，我创建了一个基本的轻量级项目，它复制了 GitHub (https://github.com/mgrackerl/react-requirejs-example) 上的基本工具，您可以在其中尝试您的代码。

关于示例项目文件：

rconfig.js - RequireJS 模块配置文件。
typings - 此目录包含 d.ts 个文件。
scripts/main.tsx - 我应该在其中添加第 3 方组件的主要 JSX 文件

要使用 DatePicker，我想要的最终结果是这样的：

import React = require('react');
import ReactDOM = require('react-dom');
import DatePicker = require('react-datepicker');

let handleChange = function(date: Date) {
   this.setState({
     startDate: date
   });
};

var myDivElement = <div>
    <DatePicker
        selected={new Date()}
        onChange={handleChange} />
</div>;
ReactDOM.render(myDivElement, document.getElementById('example'));

Answer 1

经过一些 GitHub 问题的挖掘，我终于导入了 DatePicker 组件。

提交： https://github.com/mgrackerl/react-requirejs-example/commit/4afcd28db1ee0f5a9fa0fe65bf505e521814f562

导入react-datepicker组件注意事项：

1) 必须将打字文件带到项目中才能使 Typescript 编译器正常工作（github 项目目录：typings/react-datepicker）

2) 对于 DatePicker 组件，我们必须使用 MomentJS (http://momentjs.com/) 而不是 Javascript 日期对象。

scripts/main.tsx 文件：

/// <reference path="../typings/index.d.ts" />

import React = require('react');
import ReactDOM = require('react-dom');
import DatePicker = require('react-datepicker'); // 3rd party DatePicker component
import moment = require('moment'); // use for the DatePicker component

// callback function for DatePicker onChange event
let handleChange = function(){
  return function(date:any) {
    console.log("data is: " + date);
  }; 
} 

// Create new React component that consumes 3rd party DatePicker component
var myDivElement = <div>
        <DatePicker
            selected={moment()}
            onChange={handleChange} />
</div>;
// Render newly create "myDivElement" component
ReactDOM.render(myDivElement, document.getElementById('example'));

当然还有 RequireJS 设置：

require.config({
    "urlArgs": "v=01",
    "baseUrl": "",
    "paths": {
        "react": "node_modules/react/dist/react",
        "react-dom": "node_modules/react-dom/dist/react-dom",
        "moment": "node_modules/moment/min/moment.min",
        "react-onclickoutside": "node_modules/react-onclickoutside/index",
        "react-datepicker": "node_modules/react-datepicker/dist/react-datepicker",
        "main": "scripts/main",
    },
    "shim": {
        "datatable": {
            "deps": ['jquery']
        },
        "dtbootstrap": {
            "deps": ['datatable']
        },
    },
    jsx: {
        fileExtension: ".js",
    }
});

将第 3 方 React 组件用于 RequireJS、TypeScript 项目的示例

Example of using 3rd party React component to RequireJS, TypeScript project

requirejs

typescript

reactjs