ReactJS/Javascript：React.createElement 期望字符串但传递了对象

Posted 2023-03-08

【中文标题】ReactJS/Javascript：React.createElement 期望字符串但传递了对象

【英文标题】：ReactJS/Javascript: React.createElement expecting string but passed object

【发布时间】：2019-01-31 21:44:55

【问题描述】：

当我尝试使用我的数据渲染图表时，我遇到了 React 问题。该页面是空白的，但控制台给了我这个错误消息：

警告：React.createElement：类型无效——需要一个字符串 （对于内置组件）或类/函数（对于复合 组件）但得到：对象。

我在 Apollo 和 graphql 的帮助下向 Neo4j 数据库发送查询，并希望显示一些结果。上面的错误来自我的 Graph 组件（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  >
        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);

【问题讨论】：

我认为您的 TimelineDot 方法没有意义。需要用括号括起来（似乎最后有一个幻象）

它在此处关闭括号 txt=.

(<TimelineDot position=scale(action.action.timestamp) txt=$action.timestamp - $action.action />)

仍然出错。

我在这里读到这可能是因为导入/导出语句。我玩过一些，但每次我尝试在其中任何一个周围添加 时，程序都不会呈现。

【参考方案1】：

'options' 中定义的函数应该返回对象：

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

大括号被解释为标签/反应组件（jsx） - 对象不是标签/组件然后错误

【参考方案2】：

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

【讨论】：

我对一般的代码有点困惑。我没有看到 group 在任何地方使用，但它看起来是直接操作 DOM 而不是让 React 处理它（除非我误读了）。