javascript - ReactJS/Javascript:React.createElement 期望字符串但传递了对象
问题描述
当我尝试使用我的数据渲染图表时,我遇到了 React 问题。该页面是空白的,但控制台给了我这个错误消息:
警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:对象。
我在 Apollo 和 graphql 的帮助下向 Neo4j DB 发送查询,并希望显示一些结果。上面的错误来自我的 Graph 组件(UserList.js)
用户列表.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);
解决方案
看起来你是被定义的const Canvas =
并且const TimelineDot =
在里面componentDidMount()
,所以那是他们唯一知道的地方。尝试将它们定义为render()
使用它们。
推荐阅读
- pascal - 在某些情况下,Pascal Lazaruz 没有正确地进行除法
- apache-kafka - 从 ksqlDB 中的流创建表中连接的 Rowkey
- python - 编写密码有效性检查函数
- python - 使用脚本输入密码。重击&| Python
- java - TestNG:在 Eclipse 的 DataProvider 中返回 Iterator 时出现 ClassCastException
- java - Spring 中的异步 ApplicationListener 与异步 @EventListener 的比较
- javascript - 使用 R 抓取期货数据
- html - 如何在每个 HTML 文件之外指定 webfonts?
- javascript - 尝试在反应本机堆栈导航器 v5 中访问 route.params
- typescript - TypeScript:优化嵌套的 forEach()