Hello
Understanding the Redrawing Process for React Prop Updates
What is a good implementation?
I made the next sample.
It looked like it was going to move to me, but it didn't.
The problem is that the value of counterCount defined globally is fixed.
this.props.count in the component is not updated accordingly
That's what it is.
How can I improve this?
this.forceUpdate();
Commenting out, but not commenting out did not change the symptom.
Probably <Counter> components surrounded by parent or higher-level components
I know that I can change the state to setState, but
Is that the only way you can do it?
Is React something like that?
Or there are some methods to redraw, or forceUpdate is different.
Please let me know if you know.
Thank you for your cooperation.
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>test</title>
</head>
<body>
<divid="content"></div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.2/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/babel">
var Counter = React.createClass({
handlePlus:function(){
This.props.onClickPlus();
console.log (this.props.count);
// This.forceUpdate();
},
handleMinus:function(){
This.props.onClickMinus();
console.log (this.props.count);
// This.forceUpdate();
},
render: function() {
return(
<div>
<h3>
Number of {this.props.name}
</h3>
<button onClick={this.handlePlus}>
Plus!
</button>
<div> {this.props.count} units</div>
<button onClick={this.handleMinus}>
Minus!
</button>
</div>
);
}
})
var counterCount=5;
varhandlePlus=function(){
console.log('handlePlus', counterCount);
counterCount+=1;
};
varhandleMinus=function(){
console.log('handleMinus', counterCount);
counterCount -=1;
};
var counters=(
<div>
<Counter
name = "Apple"
count = {counterCount}
onClickPlus={handlePlus}
onClickMinus={handleMinus}
/>
</div>
);
var content= document.getElementById('content');
ReactDOM.render (counters, content);
</script>
</body>
</html>
The sample was originally from the following page.
The sample on the page works correctly, but
stateful component.
React Redux Tutorial with Browser Only - Qiita
https://qiita.com/paddy-oti/items/d2fd896627ecf0b466be
Hi s.yamamoto,
"Regarding the implementation, I think there is no problem with the ""how to manage the parent (superior) component state"" mentioned in the first answer."
Do you mean that even if I try to implement it in a stateless component, I have to make it stateful somewhere in the top...
The above comment is correct.Even if you set the child component to stateless, you must retain the state somewhere that makes up the React component.Even if this is a configuration that uses a state management library such as Redux to keep data outside the context of React, the state is maintained by the React component when it uses the React component to take advantage of the state.
I've heard that the early stages of React were designed to implement Facebook's commenting capabilities, but it should be an idea that could lock in behavior and data at the UI level and complete within that context.
This perspective is officially stated in the link below.
https://ja.reactjs.org/docs/thinking-in-react.html
I hope this will be helpful.
Is React something like that?
As for , I think you misunderstand the paradigm of the update process (rather than stateful).
In a React environment, drawing update requests are made by the React framework, not by the programmer.
What the programmer does is update the state they are managing in the program.
When a programmer updates a drawing-related state, the React framework detects it and updates the drawing.
Therefore, forceUpdate() where the programmer explicitly requests drawing updates are generally avoided.
The code for the question must be forceUpdate() for the component referencing counterCount (here CounterCount).
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>test</title>
</head>
<body>
<divid="content"></div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.2/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/babel">
var Counter = React.createClass({
handlePlus:function(){
This.props.onClickPlus();
console.log (this.props.count);
// This.forceUpdate();
},
handleMinus:function(){
This.props.onClickMinus();
console.log (this.props.count);
// This.forceUpdate();
},
render: function() {
return(
<div>
<h3>
Number of {this.props.name}
</h3>
<button onClick={this.handlePlus}>
Plus!
</button>
<div> {this.props.count} units</div>
<button onClick={this.handleMinus}>
Minus!
</button>
</div>
);
}
})
var counterCount=5;
varhandlePlus=function(){
console.log('handlePlus', counterCount);
counterCount+=1;
};
varhandleMinus=function(){
console.log('handleMinus', counterCount);
counterCount -=1;
};
var Counters = React.createClass({
update: function() {this.forceUpdate();},
render: function() {
return(
<div>
<Counter
name = "Apple"
count = {counterCount}
onClickPlus={()=>{handlePlus();this.update();}}
onClickMinus={()=>{handleMinus();this.update();}}
/>
</div>
);
}
})
var content= document.getElementById('content');
ReactDOM.render (<Counters/>, content);
</script>
</body>
</html>
I tried to implement it in a way that is managed by the state of the parent (superior) component.
Do you mean that even if I try to implement it in a stateless component, I have to make it stateful somewhere in the top...
If you have any knowledge about this, please give me some advice. I would appreciate it if you could introduce me to a good link.
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>test</title>
</head>
<body>
<divid="content"></div>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.2/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/babel">
var Counter = React.createClass({
render: function() {
return(
<div>
<h3>
Number of {this.props.name}
</h3>
<button onClick={this.props.onClickPlus}>
Plus!
</button>
<div> {this.props.count} units</div>
<button onClick={this.props.onClickMinus}>
Minus!
</button>
</div>
);
}
})
var CounterParent=React.createClass({
getInitialState: function(){
return {counterCount:5};
},
handlePlus:function(){
This.setState(
{ counterCount:this.state.counterCount+1}
);
},
handleMinus:function(){
This.setState(
{ counterCount:this.state.counterCount-1}
);
},
render: function() {
return(
<div>
<Counter
name = "Apple"
count = {this.state.counterCount}
onClickPlus={this.handlePlus}
onClickMinus={this.handleMinus}
/>
</div>
)
}
});
var content= document.getElementById('content');
ReactDOM.render ((<CounterParent/>), content);
</script>
</body>
</html>
© 2024 OneMinuteCode. All rights reserved.