无法呈现 React 组件，错误在我的理解或代码中？

Question

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

Object { "$$typeof": Symbol(react.element), 类型: createElement(), key: "1", ref: null, props: {...}, _owner : null, _store: {...}, ... }

这是代码我确信它有些愚蠢我不了解渲染。

我

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。您将此变量设置为 return 从 generateGraph 函数中编辑的值，returns rendered 节点，而不是 component .然后您尝试将此节点渲染为一个组件 (<x/>)，但这是行不通的。也在 generateGraph 函数 console.log(g) 显示 渲染的 组件。因此，在您的渲染方法中只需 return 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>
    )
 }

无法呈现 React 组件，错误在我的理解或代码中？

Cant Render React Componet, Error In my understanding or code?

javascript

dom

reactjs

es6-promise

react-redux