在React16下使用报错

[YanYuanFE]

return ( <ContainerQuery query={RESPONSIVE_QUERY}> { (params) => ( <div className={classnames(['iqc-flow-stats-wrapper', params])}> <Header title="流量统计" filters={this.filters} /> <Card> <div className="flow-content"> <Chart width={600} height={400} data={data} scale={cols}> <Axis name="genre" /> <Axis name="sold" /> <Legend position="top" dy={-20} /> <Tooltip /> <Geom type="interval" position="genre*sold" color="genre" /> </Chart> </div> <div className="statistic-text"> <p>会话总数：<span>7534</span></p> <p>累计中心：<span>13</span></p> <p>累计人数：<span>1321</span></p> </div> </Card> </div> ) } </ContainerQuery> );

[YanYuanFE]

[weepy3641]

我们的开发环境是 react 15，最近在升 react 16，升好后会通知。～～ 多谢反馈。。。

[weepy3641]

兼容 react 16，说错了，不是直接升。。。

[YanYuanFE]

好的

[YanYuanFE]

不客气

[mengchen007]

问一下 怎么正常的启动 啊 npm run demo 之后的界面

[weepy3641]

@mengchen007
你这个节目已经正常启动了啊，点击列表中对应的 demo 就可以看到图表啦。

[mengchen007]

正常的就是这样的?我以为一个整的管理系统呢,谢谢了

[Lizhooh]

+1，查了好久才发现是 BizCharts 的问题。

[wxj19880511]

有什么好办法解决这个问题呢，如果你们暂时没空更新？@weepy3641

[NingYuanLee]

@wxj19880511 同问，我暂时的想法是直接用antv

[NingYuanLee]

@wxj19880511

import React, { Component } from 'react';
import F2 from 'antv/f2';
class Home extends Component {
initCallBack = (data, chart) => {
// Step 2: 载入数据源
chart.source(data);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre');
// Step 4: 渲染图表
chart.render();
}
render() {
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
return (

)
}
}
class MyF2 extends Component {
componentDidMount() {
//初始化Chart
this.initChart()
}
shouldComponentUpdate(newProps, newState) {
const { style: oldStyle, className: oldClassName, data: oldData } = this.props
const { style: newStyle, className: newClassName, data: newData } = newProps
//当且仅当样式props改变时,重新初始化Chart
if (oldStyle !== newStyle || oldClassName !== newClassName) {
return true
} else {
if (oldData !== newData && this.chart) {
// 数据改变时调用changeData
this.chart.changeData(newData);
}
return false
}
}
componentDidUpdate() {
//重新初始化Chart
this.initChart()
}
componentWillUnmount() {
//组建卸载时destroy,释放内存
this.chart.destroy();
this.chart = null;
}
initChart = () => {
const { el, elC: { offsetWidth: width, offsetHeight: height } } = this.refs
const { data, initCallBack, pixelRatio } = this.props
if (this.chart) {
this.chart.destroy()
this.chart = null;
}
// Step 1: 创建 Chart 对象
this.chart = new F2.Chart({
el, // 指定图表容器对象
width, // 指定图表宽度
height, // 指定图表高度
pixelRatio: pixelRatio || window.devicePixelRatio,
})
initCallBack(data, this.chart)
}
render() {
const { style, className } = this.props
return (
<div className={className || ""} style={style || {}} ref="elC">
<canvas style={{ width: "100%", height: "100%" }} ref="el" />

)
}
}
export default Home;

[weepy3641]

@NingYuanLee
react 16 的兼容版本这周会有 beta 版出来。

[NingYuanLee]

@weepy3641
恩恩，很期待呢

[wxj19880511]

@weepy3641, 非常感谢……

[arkfang]

请问关于React 16有最新消息么

[weepy3641]

@arkfang
内部已经在测试了，这周五会有 beta 版本出来。

[weepy3641]

@arkfang @wxj19880511 @NingYuanLee @YanYuanFE @Lizhooh @mengchen007

bizcharts 兼容 react16 的 beta 版已经发布。 欢迎使用。
3.1.0-beta.1

facet 使用有一丢丢改变，参见： https://github.com/alibaba/BizCharts/blob/master/doc/api/facet.md
中的子组件说明。

[weepy3641]

以上 bug 都已经修复。
兼容 react16 正式版 3.1.0 已经发布。