Replace deprecated lifecycle hooks with new one. Add support for angular component with string paramters
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
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/