Javascript 向react中的儿童传递道具（向下2层）
我想将状态作为道具从父组件传递到子组件，该子组件包含另一个将使用道具的子组件。这是代码库的附件 附件1.1这里是父组件Javascript 向react中的儿童传递道具（向下2层）,javascript,reactjs,axios,components,react-props,Javascript,Reactjs,Axios,Components,React Props,我想将状态作为道具从父组件传递到子组件，该子组件包含另一个将使用道具的子组件。这是代码库的附件 附件1.1这里是父组件InformationPage，它呈现一个名为QuoteCard的子组件。我们使用react钩子来定义和更新趋势状态。我们正在使用axios获取一个API请求，该请求将存储在trends状态中，并向下传递到QuoteCard组件（向下1级） 附件1.3这是ApexChart组件的完整代码库。我为上下文放置了完整的代码库。当我传入props？.trends[0]？.period时，
InformationPageQuoteCard的子组件。趋势trendsQuoteCardApexChartprops？.trends[0]？.periodimport React from 'react';
import Chart from 'react-apexcharts';
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43],
},
{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27],
},
{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14],
},
{
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8],
},
],
options: {
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
},
},
yaxis: {
labels: {
show: true,
style: {
colors: 'rgba(255, 255, 255, 0.7)',
},
},
},
xaxis: {
type: 'datetime',
categories: [
props?.trends[0]?.period,
'01/02/2011 GMT',
'01/03/2011 GMT',
'01/04/2011 GMT',
'01/05/2011 GMT',
'01/06/2011 GMT',
],
labels: {
show: true,
style: {
colors: 'rgba(255, 255, 255, 0.7)',
},
},
},
legend: {
position: 'right',
offsetY: 40,
},
fill: {
opacity: 0.8,
},
},
};
}
render() {
return (
<div id='chart'>
<Chart
options={this.state.options}
series={this.state.series}
type='bar'
height={350}
/>
</div>
);
}
}
export default ApexChart;
从“React”导入React；
从“react apexcharts”导入图表；
类ApexChart扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
系列：[
{
名称：‘产品A’，
数据：[44,55,41,67,22,43]，
},
{
名称：‘产品B’，
数据：[13,23,20,8,13,27]，
},
{
名称：‘产品C’，
数据：[11,17,15,15,21,14]，
},
{
名称：‘产品D’，
数据：[21,7,25,13,22,8]，
},
],
选项：{
图表：{
类型：'bar'，
身高：350，
对,，
工具栏：{
秀：没错，
},
缩放：{
启用：对，
},
},
响应：[
{
断点：480，
选项：{
图例：{
位置：'底部'，
抵销额：-10，
副职：0，
},
},
},
],
打印选项：{
酒吧：{
水平：错，
},
},
亚克斯：{
标签：{
秀：没错，
风格：{
颜色：“rgba（255，255，255，0.7）”，
},
},
},
xaxis：{
键入：“日期时间”，
类别：[
道具？趋势[0]？期间，
“2011年2月1日格林尼治标准时间”，
“2011年3月1日格林尼治标准时间”，
“2011年4月1日格林尼治标准时间”，
“2011年5月1日格林尼治标准时间”，
“2011年6月1日格林尼治标准时间”，
],
标签：{
秀：没错，
风格：{
颜色：“rgba（255，255，255，0.7）”，
},
},
},
图例：{
位置：'右'，
副职：40，
},
填写：{
不透明度：0.8，
},
},
};
}
render（）{
返回(
);
}
}
导出默认ApexChart；
任何帮助都将不胜感激。谢谢 在您的InformationPage组件中，尝试将
上下文api，它是为类似您的用例而设计的。
function QuoteCard(props) {
return (
<Grid item>
<ApexChart trends={props?.trends} />
</Grid>
);
}
export default QuoteCard;
import React from 'react';
import Chart from 'react-apexcharts';
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43],
},
{
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27],
},
{
name: 'PRODUCT C',
data: [11, 17, 15, 15, 21, 14],
},
{
name: 'PRODUCT D',
data: [21, 7, 25, 13, 22, 8],
},
],
options: {
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
responsive: [
{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0,
},
},
},
],
plotOptions: {
bar: {
horizontal: false,
},
},
yaxis: {
labels: {
show: true,
style: {
colors: 'rgba(255, 255, 255, 0.7)',
},
},
},
xaxis: {
type: 'datetime',
categories: [
props?.trends[0]?.period,
'01/02/2011 GMT',
'01/03/2011 GMT',
'01/04/2011 GMT',
'01/05/2011 GMT',
'01/06/2011 GMT',
],
labels: {
show: true,
style: {
colors: 'rgba(255, 255, 255, 0.7)',
},
},
},
legend: {
position: 'right',
offsetY: 40,
},
fill: {
opacity: 0.8,
},
},
};
}
render() {
return (
<div id='chart'>
<Chart
options={this.state.options}
series={this.state.series}
type='bar'
height={350}
/>
</div>
);
}
}
export default ApexChart;