0

我对 react.js 真的很陌生，还在练习

当用户在表中选择一行时，我想将 ReChart 组件呈现为新页面（只是为了可视化数据）。

我试过这样的事情：

（必须在此处插入分号，因为未显示标签）

handleRowSelection(selectedRows) {
console.log('selectedRows: ' + selectedRows );
var myChart = React.createClass({
  render(){
      return(
         <MyChart value={selectedRows}>
       )
   }
})} 

export default class MyChart extends React.Component {
 constructor(props){
  super(props);
  }
  render(){
  //must be generic
  return(
  <LineChart
  data={this.props.value}
  margin={{ top: 40, right: 40, bottom: 20, left: 20 }}>
  <CartesianGrid vertical={false} />
  <XAxis dataKey="id" label="myDataChart" />
  <YAxis domain={['auto', 'auto']} label="attribute" />
  <Tooltip />
  <Line dataKey="attribute" stroke="#3f51b5" dot={false} />
  </LineChart>
  )
};

不幸的是它没有帮助。这里有什么猜测吗？

先感谢您！

4

1 回答 1

0

您无需编写具有 render() 的附加函数。这就是 React 类的目的。其次，你原来的 React 组件没有对 handleClick() 的引用。它需要看起来更像这样：

class Thing extends Component {
  state = {
    fill: '#eee',
  }

  handleClick = () => {
    this.setState({ fill: 'black' });
  }

  render() {
    return (
      <svg fill={this.state.fill} onClick={this.handleClick} />
    );
  }
}

单击 SVG 将更改状态，这将导致重新渲染。

于 2017-05-01T16:30:09.347 回答