angular2react icon indicating copy to clipboard operation
angular2react copied to clipboard

Replace deprecated lifecycle hooks with new one. Add support for angular component with string paramters

Open alessandro308 opened this issue 4 years ago • 2 comments

alessandro308 avatar Jun 09 '21 14:06 alessandro308

with the merge of this MR will it be possible to use the Hooks?

https://reactjs.org/docs/hooks-intro.html

import React, { useState } from 'react'
import { react2angular } from 'react2angular'

export let Four = ({ four }) => {
  const [number, setNumber] = useState(four)
  return (
    <React.Fragment>
      <div>
        number: {number}
      </div>

      <button onClick={() => setNumber(number + 1)}> Plus </button>
    </ React.Fragment>
  )
}

export let FourAngular = react2angular(Four, ['four'])

Currently we do like this:

import React from 'react'
import { react2angular } from 'react2angular'

export class Four extends React.Component {
  constructor (props) {
    super(props)
    this.state = { number: props.four }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    this.setState(prevState => ({
      number: prevState.number + 1
    }))
  }

  render () {
    return (
      <div>
        <p>number: {this.state.number}</p>
        <button onClick={this.handleClick}> Plus </button>
      </div>
    )
  }
}

export let FourAngular = react2angular(Four, ['four'])

Based on https://github.com/bcherny/angular2react-demos/blob/master/multi-file/src/Four.jsx

marianyfs avatar Jun 09 '21 23:06 marianyfs

We are using hooks even with the code before this pull request. This PR, instead, replace the deprecated method of React in favour of the new method.

This lib, interally, uses React.createElement and it generate a React class component to render the Angular one. So, your question in case, is related to react2angular since the input here is an angular component. In that case, for react2angular, we are using a version a bit modified to work with our version of AngularJS. If you want, give it a look: https://github.com/domotz/react2angular/

alessandro308 avatar Jun 10 '21 06:06 alessandro308