react2angular, 在 Angular 1应用程序中,嵌入响应组件的最简单方法

分享于 

3分钟阅读

GitHub

  繁體 雙語
The easiest way to embed React components in Angular 1!
  • 源代码名称:react2angular
  • 源代码网址:http://www.github.com/coatue-oss/react2angular
  • react2angular源代码文档
  • react2angular源代码下载
  • Git URL:
    git://www.github.com/coatue-oss/react2angular.git
    Git Clone代码到本地:
    git clone http://www.github.com/coatue-oss/react2angular
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/coatue-oss/react2angular
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    React to Angular: The easiest way to use React components in Angular 1

    react2angular Build StatusNPMApache2

    将响应组件嵌入 Angular 1应用程序中最简单的方法 ! ( 与 angular2react 相反)

    安装

    # Using Yarn:yarn add react2angular react react-dom prop-types# Or, using NPM:npm install react2angular react react-dom prop-types --save

    用法

    1创建一个响应组件

    import { Component } from'react'classMyComponentextendsComponent {
     render() {
     return<div><p>FooBar: {this.props.fooBar}</p><p>Baz: {this.props.baz}</p></div> }
    }

    2将它的公开为 Angular

    import { react2angular } from'react2angular'angular
    . module('myModule', [])
    . component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))

    注意:如果在组件上定义了 propTypes 插件,它们将用于计算组件绑定,并且可以省略参数:

    .... component('myComponent', react2angular(MyComponent))

    如果 propTypes 已经定义并且传入 2nd 个参数,则参数将重写 propTypes

    3在你的Angular 1代码中使用它

    <my-componentfoo-bar="3"baz="'baz'"></my-component>

    依赖注入

    将 services/constants/etc. 传递到你的React组件很容易: 只要将它们作为 3rd 参数传递,它们就可以在你的组件的道具中使用。 例如:

    import { Component } from'react'import { react2angular } from'react2angular'classMyComponentextendsComponent {
     state = {
     data:'' }
     componentDidMount() {
     this.props.$http.get('/path').then(res=>this.setState({ data:res.data })
     )
     }
     render() {
     return<div> { this.props.FOO }
     { this.state.data }
     </div> }
    }
    angular
    . module('myModule', [])
    . constant('FOO', 'FOO!')
    . component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))

    注意:如果有一个与支柱的名称匹配的注射,那么该值将用注射来解析,而不是支柱。

    测试

    npm test

    许可证

    orca


    COM  angular  react  component  组件  
    相关文章