React, Comment envoyer des accessoires du composant parent au composant enfant ? (pour utiliser ces accessoires en dehors de la fonction de rendu)
Hashan Dananjaya
Je veux envoyer des accessoires de mon composant parent au composant enfant. c'est la façon dont j'ai utilisé dans l'état du composant parent-->
chartArray:[
{
id:0,
chart:'LineChart',
device:1,
sensor:1,
},
{
id:1,
chart:'LineChart',
device:2,
sensor:4,
},]
Dans la méthode de rendu du composant parent -> J'utilise le composant Chart et j'envoie ces accessoires
{
chartArray.map((obj,index)=>{
return(
<Grid item xs={12} md={12} key={index}
className={classes.mainGrid}
style={{paddingBottom:30}}
>
<div>
<div >
<div>
<Typography
variant={"h5"}
>
Device Id: {obj.device}
<IconButton style={{float:'right'}}
onClick={this.handleDeleteChart.bind(this,index)}
>
<DeleteIcon fontSize="small" />
</IconButton>
</Typography>
</div>
</div>
<div>
<Typography variant={"subtitle1"}>
Sensor: Temperature
</Typography>
</div>
</div>
<Paper elevation={3}
style={{
overflowX: 'scroll',
}}
>
**<Chart
chartType={obj.chart}
sensorId={obj.sensor}
deviceId={obj.device}
/>**
</Paper>
</Grid>
)
}
)}
Dans le composant enfant-->
exporter la classe par défaut Chart étend le composant {
constructor(props){
super(props);
this.state={
id:0,
chart:props.chartType,
device:props.deviceId,
sensor:props.sensorId,
}
}
async componentDidMount(){
const response2 = await fetch(`/api/SensorData/${this.state.device}/${this.state.sensor}`)
const bodySensors = await response2.json()
const labels1=[]
const data1=[]
bodySensors.map((chartdata)=>{
return(
labels1.push(chartdata.date),
data1.push(chartdata.value)
)
})
this.setState({
dataLineChart:{
labels:[...labels1],
datasets:[
{
fill:false,
label:'Temperature',
data:[...data1],
backgroundColor:'rgba(210, 77, 87, 1)',
borderColor:'rgba(137, 196, 244, 1)',
pointBorderWidth:1,
pointHoverRadius:10,
pointHoverBackgroundColor:'rgba(210, 77, 87, 1)',
pointHoverBorderColor:'rgba(137, 196, 244, 1)',
pointHoverBorderWidth:2,
pointRadius:2,
// how much closer to pop up point
pointHitRadius:10
// steppedLine:true
}
]
}
})
}
render() {
const{chartType}=this.props
const {dataLineChart} = this.state
if (chartType==='BarChart')
return (
<BarChart />
)
else if (chartType==='LineChart')
return (
<LineChart ccData={dataLineChart}/>
)
else if (chartType==='PieChart')
return (
<PieChart/>
)
}
}
quand j'utilise cette façon d'utiliser ces accessoires en dehors de la fonction de rendu. Ça marche. Lorsque j'ajoute des objets à l'état du composant parent -> chartArray, cela fonctionne également. Mais chaque fois que je supprime quelque chose de ce chartArray, il n'envoie pas d'accessoires au composant enfant? Je suis vraiment confus ici. s'il vous plaît aider. Merci
Khabir
Veuillez suivre cet exemple.
Composant parent
import React, {Component, useEffect, useState} from 'react';
import PChild from "./PChild";
export class Parent extends Component {
constructor(props) {
super(props);
this.state = {items: []};
}
componentDidMount() {
let json = [];
json.push({track: { id:1, name: 'Black Sabbath, from the album Black Sabbath (1970)'}});
json.push({track: { id:2, name: 'Blackfield, from the album Blackfield (2004)'}});
json.push({track: { id:3, name: 'Bo Diddley, from the album Bo Diddley (1958)'}});
json.push({track: { id:4, name: 'Damn Yankees, from the album Damn Yankees (1990)'}});
this.setState({items: json});
}
render() {
return (
<div>
<PChild items={this.state.items} name="Khabir"/>
</div>
);
}
}
Composant enfant
import React, {useEffect, useState} from 'react';
// Parent to Child communication
export class PChild extends React.Component {
componentDidUpdate() {
console.log(this.props.items);
console.log(this.props.name);
}
render() {
return (
<div>
{this.props.items.map((item, i) => {
return <li key={item.track.id}>
{(`Item ${i+1} - ${item.track.name}`)}
</li>
})}
</div>
);
}
}