-1
There is a downside to creating the components in React
by function instead of class?
In the case of Class, the component does not need to have an ID to be accessed internally and change its properties because it changes state. Already in the function has not been, so I only found the solution of sending out for the HTML provoke the browser render.
There is an internal way to change a component property by function?
Type:
function Counter (props){
const style = {
color: props.color
}
const id = props.id;
var numero = props.numero;
return (
<div>
<button onClick={
function(){
numero = numero + 1;
document.getElementById(id).innerHTML = "A conta está em: " + numero;
}
}>+</button>
<span id={props.id} style={style}>A conta está em: {numero}</span>
</div>
);
}
There is no disadvantage is only the new way (API) that was created. Now your code above has conceptual problems for those who want to do this in
REACT
! It’s not like thatdocument.getElementById(id).innerHTML
what makes ...– novic
According to React’s own official website, there are advantages to using functions and disadvantages in using classes. If the creators themselves say this, who am I to say otherwise? https://pt-br.reactjs.org/docs/hooks-intro.html
– Taffarel Xavier
Because you did so:
numero = numero + 1;
 document.getElementById(id).innerHTML = "A conta está em: " + numero;
?– novic
Actually it was just a test because I’m seeing a course and the guy teaches by class and I tried to do the same thing by function. But I couldn’t find another way to change the value of the counter internally, because props.numero is "read only". What would be the right way?
– Luis Fernando Martinelli Ramos
Got it, so around this Counter component has a Father component ???
– novic
Actually only one div because React doesn’t allow it to have more than one parent component. So if you need to have multiple components, like buttons etc, you all need to be a parent’s child.
– Luis Fernando Martinelli Ramos
In the case of Class, the component does not need to have an ID to be accessed internally and change its properties because it changes state. Already in the function has not been, so I only found the solution of sending out for the HTML provoke the browser render
– Luis Fernando Martinelli Ramos
Friend put everything in question only this piece gets complicated
– novic
Já na função não tem estado
has yes! has the hook to do this ...– novic
Thank you, do you have an article address that explains well about the Hooks? I will study more deeply.
– Luis Fernando Martinelli Ramos
Take a look at your statement which is an error (https://pt-br.reactjs.org/docs/hooks-faq.html#how-does-React-Associate-hook-calls-with-Components) read here
– novic