我试图将数据从父组件传递给孩子,然后让孩子将其呈现到屏幕上。渲染链接到提交按钮。另外,在“提交”按钮上,我正在将数据(或者我认为是我)传递给孩子进行渲染,但是屏幕上没有任何显示。
从嵌套在父级中的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>
);
}