反应2角

在 Angular 1 apps 中嵌入 React 组件最简单的方式 ! (反对: 角2反应(中文(简体) )

安装

# 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'

class MyComponent extends Component {
  render() {
    return <div>
      <p>FooBar: {this.props.fooBar}</p>
      <p>Baz: {this.props.baz}</p>
    </div>
  }
}

2. 将其展示给角星

import { react2angular } from 'react2angular'

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

注:如果定义 propTypes 在您的组件上,它们将被用于计算组件的绑定值,您可以省略第二个参数:

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

若为 propTypes 被定义, 您在第二个参数中通过, 参数将覆盖 propTypes。 。 。 .

3. 在您的角 1 代码中使用

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

注:所有回放道具被转换为AngularJS单向绑定. 如果您正在将函数传递到您的 React 组件中, 它们需要被传递为函数 ref, 而不是一个可撤回的表达式 。 保留现有的AngularJS风格的表达方式将随着函数在每个消化回路上重新评价而产生无限回路.

依赖性注射

很容易通过服务/constants/etc.到您的 React 组件:只是通过它们作为第3个参数,它们将会在您的组件的Propals中可用. 例如:

import { Component } from 'react'
import { react2angular } from 'react2angular'

class MyComponent extends Component {
  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

许可证

阿帕奇2号