将第三方React组件用于RequireJS，TypeScript项目的示例

-1

如何将第三方React组件导入Typescript TSX文件？将第三方React组件用于RequireJS，TypeScript项目的示例

我有一个使用一个漂亮的JavaScript前端项目：

打字稿
阵营（0.14.6）
阵营-DOM（0.14.6）
RequireJS

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

阵营-的DatePicker（https://github.com/Hacker0x01/react-datepicker）
阵营 - 选择（https://github.com/JedWatson/react-select）

为了让事情有点清楚，我创建了复制在GitHub的基本工具，一个基本的轻量级的项目（https://github.com/mgrackerl/react-requirejs-example），您可以尝试你的代码。

关于示例项目文件：

rconfig.js - RequireJS模块配置文件。
typings - 此目录保存d.ts文件。
脚本/ main.tsx - 主要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'));

来源

2016-09-25 AntonIva

你能解释一下什么是不与您现有的工作方式？你是否在问一般如何设置你的项目？ –

是的，如何设置一般。如何正确导入当前项目设置中的第三方组件。我想听听已经走过这条路的其他开发者。当然，我会更新这篇文章（和Github项目），同时做更多的研究。谢谢@DanielRosenwasser – AntonIva

我们的网站实际上有一个关于React（带有Webpack）[这里]（https://www.typescriptlang.org/docs/handbook/react-&-webpack.html）的指南和一个使用AMD模块的指南（使用RequireJS）[这里]（https://www.typescriptlang.org/docs/handbook/knockout.html）。也许这会有所帮助。我将继续使用与您一直使用的相同类型的导入，因为它正确地反映出这些第三方库实际上不是ES风格的模块。 –

经过一番挖掘GitHub问题，最后，我导入了DatePicker组件。

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

注意有关导入反应，日期选择器组件：

1）必须把分型文件到项目，使打字稿编译工作（GitHub的项目目录：分型/反应，日期选择器）

2）对于DatePicker组件，我们必须使用MomentJS（http://momentjs.com/）而不是Javascript Date对象。

脚本/ 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", 
    } 
});

来源

2016-10-08 01:56:25 AntonIva

将第三方React组件用于RequireJS，TypeScript项目的示例

回答

相关问题