ReactJS/Javascript:React.createElement需要字符串，但传递了对象

当我试图用数据渲染图形时，我遇到了React问题。页面为空，但控制台显示以下错误消息：

警告：React.createElement:类型无效--应为字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：对象

在Apollo和graphql的帮助下，我将向Neo4j数据库发送一个查询，并希望显示一些结果。上面的错误来自我的图形组件（UserList.js）

UserList.js

class Graph extends React.Component {

    constructor({data}) {
        //console.log('construc data' ,data);
        const times = d3.extent(data.action.map(action => action.timestamp))
        console.log('construc data' ,times);
        const range = [50, 450]
        super({data})
        this.scale = d3.time.scale().domain(times).range(range)
        this.state = {data, times, range}
        //console.log('state' ,this.data);
    }

    componentDidMount() {
        let group
        const { target } = this.refs

        const Canvas = ({children}) => 
    <svg height="200" width="500">
        {children}
    </svg>



        group.append('circle')
    .attr('cy', 160)
    .attr('r', 5)
    .style('fill', 'blue')

group.append('text')
    .text(d => d.year + " - " + d.event)
    .style('font-size', 10)
    .attr('y', 115)
    .attr('x', -95)
    .attr('transform', 'rotate(-45)')


    const TimelineDot = ({position, txt}) =>
    <g transform={`translate(${position},0)`}>

        <circle cy={160} 
                r={5} 
                style={{fill: 'blue'}} />

        <text y={115} 
              x={-95} 
              transform="rotate(-45)" 
              style={{fontSize: '10px'}}>{txt}</text>

    </g>
    }

    render() {
        const { data } = this.state
        const { scale } = this
        return (
            <div className="timeline">
                <h1>{this.props.name} Timeline</h1>
                <Canvas>
                    {data.action.map((action, i) => 
                        <TimelineDot position={scale(action.timestamp)} 
                                     txt={`${action.timestamp} - ${action.action}`}
                        />
                    )}
                </Canvas>
            </div>
        )
    }


}

export default graphql(getObjectsQuery, 
    { options: (ownProps) => { 
      console.log(ownProps.startTime); 
      return ({ second: { startTime: ownProps.startTime,
                              endTime: ownProps.endTime
       } }) 
    } } )(Graph);

类图扩展了React.Component{
构造函数（{data}）{
//console.log（'construc data'，data）；
const times=d3.extent（data.action.map（action=>action.timestamp））
console.log（'construc data'，次）；
常数范围=[50450]
超级（{data}）
this.scale=d3.time.scale（）.domain（times）.range（range）
this.state={data，times，range}
//console.log（'state'，this.data）；
}
componentDidMount（）{
let组
const{target}=this.refs
常量画布=（{children}）=>
{儿童}
group.append（'circle'））
.attr（'cy'，160）
.attr（'r'，5）
.style（'填充'，'蓝色'）
group.append（'text'）
.text（d=>d.year+“-”+d.event）
.style（'font-size'，10）
.attr（'y'，115）
.attr（'x'，-95）
.attr（'transform'、'rotate（-45'））
常数TimelineDot=（{position，txt}）=>
{txt}
}
render（）{
const{data}=this.state
const{scale}=此
返回(
{this.props.name}时间线
{data.action.map（（action，i）=>
)}
)
}
}
导出默认图形QL（getObjectsQuery，
{选项：（ownProps）=>{
console.log（ownProps.startTime）；
return（{second:{startTime:ownProps.startTime，
endTime:ownProps.endTime
} }) 
}（图表）；

看起来您是在

componentDidMount（）

内部定义的

const Canvas=

和

const TimelineDot=

，所以这是它们唯一已知的位置。尝试将定义它们移动到

render（）

中以使用它们。

在“选项”中定义的函数应返回对象：

return { second: { startTime: ownProps.startTime,
                   endTime: ownProps.endTime
   } }

---

用花括号解释为标记/反应组件（jsx）-对象不是标记/组件，然后出错

我认为您的

TimelineDot

方法没有意义。需要在parens中进行包装（似乎只是在结尾有一个幻影

}

），它在这里关闭parens txt={.

（）

仍然出错。我在这里读到一些事情可能是因为导入/导出语句。我玩了一些，但每次我尝试添加{}在它们周围，程序都不会渲染。我对一般的代码感到有点困惑。我看不到任何地方使用了

group

，但它看起来是直接操纵DOM，而不是让React处理（除非我误读了）。