Skip to content

Conversation

alessandro308
Copy link

No description provided.

@marianyfs
Copy link

marianyfs commented Jun 9, 2021

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

@alessandro308
Copy link
Author

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/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants