Cant Render React Componet，在我的理解或代码中有错误？

Question

所以我已经建立了一个图形生成器，并在道具上拥有了所有正确的数据，问题是当我去渲染构建组件它记录的时候

Object {“ $$ typeof”：Symbol（react.element），类型：createElement（），键：“ 1”，ref：null，props：{…}，_owner：null，_store：{…} ，…}

这里是代码，我确信它对渲染不了解，这很愚蠢。

i

mport React, { Component } from 'react'
import * as action from '../../actions'
import { connect } from 'react-redux'
import jsx from 'react-jsx'
import { bindActionCreators } from 'redux'
import {Modal} from './Modal'
@connect(
  (flux, props) => {

    return {
      filters: flux.FilterStore,
      ready: flux.FilterStore.ready,
      presets: flux.DataStore.preSelectList,
      graphs: flux.GraphStore.graphList
    }
  },
  (dispatch, props) => {
    dispatch(action.fetchGraphList())
    return {
      addDataReportGraphDetails: bindActionCreators(action.addDataReportGraphDetails, dispatch)
    }
  }
)

class RenderGraphPreview extends Component {
  constructor(props) {
    super(props)
    this.state = {
      running: {},
      show:false,
      graph:{}
    }
    this.data = 0;
  }


  //Error function for shorthand errors
  throwError = (string = "Error", err = null) => {
    throw new Error(`${string}:${err}`)
  }

  //simple print function to print objects and strings
  p = (string, variable) => {
    typeof variable === `object` ? variable = JSON.stringify(variable) : variable
    console.log(`${string}:${variable}`)
  }

  showModal = e => {
    this.state.show = true
    }


  generateGraph = ({ presets, filters, graphDetails }) => {
    var reportProps = {
      wasRunning: true,
      companyName: filters.company_name,
      companyVertical: filters.company_vertical,
      graphTitle: jsx.client(`<div>${graphDetails.title}</div>`)(reportProps).props.children
    }
    this.data++

    if (typeof reportProps.graphTitle == "object") {

      reportProps.graphTitle = reportProps.graphTitle.join("")
    }
    if (!this.state.running) {
      reportProps.wasRunning = false
      this.state.running = true
    }
    if (graphDetails.graph) {
      var Graph = React.createFactory(require(`../graphs/${graphDetails.graph}`).default);
      var newGraphProps = {}
      var graphPropKeys = Object.keys(graphDetails.props || {})
      graphPropKeys.map((graphKey) => {

        if (graphDetails.props[graphKey] && graphDetails.props[graphKey].toString().length > 0)
          newGraphProps[graphKey] = graphDetails.props[graphKey]
      })
      if (graphDetails.timeframe) {
        newGraphProps[timeframe] = graphDetails[timeframe]
      }

      if (graphDetails.props.attackIndexFilterPreset) {
        let preset; 
        for (let j = 0, jEnd = presets.length; j < jEnd; j++) {
          if (presets[j]._id == graphDetails.props.attackIndexFilterPreset) {
            return preset = presets[j]
          }
        }
        if (preset) {
          console.log(`In presents`)
          newGraphProps = { ...preset, ...newGraphProps }
        }
      }
    }
      // console.log(<Graph key={this.state.count++} isDocument={true} reportKey={graphDetails.key} onImageCreated={this.props.addDataReportGraphDetails} {...filters} {...reportProps} {...newGraphProps}/>)
    return (
      <Graph key={this.data} isDocument={true} reportKey={graphDetails.key} onImageCreated={this.props.addDataReportGraphDetails} {...filters} {...reportProps} {...newGraphProps}/>
    )
  }


    //Verifies we have the correct data to build the graph
    startGraphGeneration = async (e,{ props }) => {
      e.preventDefault()
      let require = this.props.filters && this.props.presets && props
      if (!require) {
        this.throwError()
      }
      let graphProps = {
        presets: this.props.presets,
        filters: this.props.filters,
        graphDetails: props,
      }
     let g = await this.generateGraph(graphProps) 
      this.setState({
        graph: g
      });
     console.log(g)

    }



    render() {
      var x = this.state.graph
    return (

     <div> 
       <button onClick={(e) => this.startGraphGeneration(e,this.props)}>Preview Graph</button> 
        {this.state.graph ? <x/> : `Doing Noting`}
     </div>
    )


    }
  }

  export default connect()(RenderGraphPreview)

Answer 1

在渲染方法中，您使用this.state.graph。您将此变量设置为generateGraph函数返回的值，该函数返回rendered节点，而不是component。然后尝试将此节点呈现为组件（<x/>），这是行不通的。同样在generateGraph功能console.log(g)向您显示rendered组件。因此，只需在渲染方法中返回x：

 render() {
    var x = this.state.graph
    return (

     <div> 
       <button onClick={(e) => this.startGraphGeneration(e,this.props)}>Preview Graph</button> 
        {this.state.graph ? x : `Doing Noting`}
     </div>
    )
 }