首页 > 解决方案 > 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>

            );
          }

标签: javascriptreactjsd3.jsrender

解决方案


推荐阅读