首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React.createElement应为字符串,但传递了对象

React.createElement应为字符串,但传递了对象
EN

Stack Overflow用户
提问于 2018-08-26 04:15:51
回答 2查看 169关注 0票数 -1

当我试图用我的数据呈现一个图表时,我遇到了React的问题。页面是空白的,但是控制台给了我这个错误消息:

警告: React.createElement:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件),但got: object。

我发送了一个查询,在阿波罗和图形of的帮助下,Neo4j数据库,并希望显示一些结果。上面的错误来自我的图形组件(UserList.js)

UserList.js

代码语言:javascript
复制
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);
EN

回答 2

Stack Overflow用户

发布于 2018-08-26 09:45:52

看起来你在componentDidMount()中定义了const Canvas =const TimelineDot =,所以这是他们唯一知道的地方。尝试将定义它们移动到render()中以使用它们。

票数 0
EN

Stack Overflow用户

发布于 2018-08-29 17:56:02

“options”中定义的函数应返回object:

代码语言:javascript
复制
return { second: { startTime: ownProps.startTime,
                   endTime: ownProps.endTime
   } }

带大括号的解释为标记/反应组件(jsx) -对象不是标记/组件,则出现错误

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52020919

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档