Question

我对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>
  )
};

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

提前谢谢！

Answer 1

您不会编写具有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将更改状态，然后将导致重新呈现。

单击创建新的React Component（chartpage）

1 个答案: