javascript - React/D3:从孩子渲染图
问题描述
我正在尝试将数据从父组件传递给子组件,并让子组件将其呈现到屏幕上。渲染链接到提交按钮。此外,在提交按钮上,我正在将数据(或者我认为我是)传递给孩子进行渲染,但屏幕上没有显示任何内容。
从嵌套在 Parent 中的 return 函数内部:
{this.state.submit && <Graph width={400} height={220} nodes={this.data}/>}
子组件:
import './graph.css';
import * as d3 from "d3";
import React, { Component } from 'react';
import Calendar from '../Calendar/index';
class Graph extends Component {
render() {
return(
<div className="Graph">
<p>{this.props.nodes}</p>
</div>
)//return
}//render
}
export default Graph;
填充数据
populate(){
const {data:{loading, error, action}} = this.props;
console.log(this.props);
if(loading) {
return <option disabled>Loading...</option>;
}else if (error){
return<p>Error!</p>;
}
return (
<Item.Group divided>
{action.map(action =>
<div>
<ul>
<li>{action.action}</li>
<li>{action.timestamp}</li>
<ul>
{action.object.map( (obj) => {
return (<li>{obj.filename}</li>)
})}
</ul>
</ul>
</div>
)}
</Item.Group>
);
}
解决方案
推荐阅读
- go - 如何使用 Google Drive API v3 在共享驱动器中按 ID 检索文件夹
- clang - QtCreator 中的 ClangCodeModel 在导入的 C++20 模块上说“找不到模块”
- python - 我该如何解决这个问题?
- java - 无法在 Junit5 Mockito-inline 中以不同的行为模拟同一个类构造函数两次
- javascript - 为什么 useState 返回未定义?
- javascript - 带有空字符串、“任何”或“全部”的 Firestore 查询
- javascript - JavaScript 中的井字游戏
- flutter - 图像正在加载 chrome 但未在手机中加载
- swift - 当您在后台访问另一个应用程序时,Flora 和 Forest 应用程序如何知道?[迅速]
- google-cloud-platform - 每个月的第一个星期一的云调度程序触发