将破折号的(plotly)反应功能组件转换为类组件

时间:2019-04-01 04:44:52

标签: python reactjs plotly-dash

我刚刚了解了破折号Create your own components。我的反应也很新。我通常更喜欢在 class 中编写组件。我创建了一个React文件,在其中转储dash html component的源代码。 Div 组件是用函数编写的。我想将此 Div 组件转换为类。这是我在做什么-

import React from 'react';
import PropTypes from 'prop-types';
import {omit} from 'ramda';

class Div extends Component{

   render(){
     const props = this.props;
     const dataAttributes = {};
     if(props.loading_state && props.loading_state.is_loading) {
          dataAttributes['data-dash-is-loading'] = true;
     }

     return (
        <div id = "scroll-div" className="scroll-bar"
            onClick={() => props.setProps({
                n_clicks: props.n_clicks + 1,
                n_clicks_timestamp: Date.now()
            })}
           {...omit(['n_clicks', 'n_clicks_timestamp', 'loading_state', 'setProps'], props)}
        {...dataAttributes}
        >
           {props.children}

        </div>
    );
  }
};
Div.defaultProps = {
  n_clicks: 0,
  n_clicks_timestamp: -1,
};

Div.propTypes = {
     .......
};

export default Div;

但是我转换为类的转换无效。我究竟做错了什么?将 Div 组件转换为类的正确方法是什么?

谢谢:)

1 个答案:

答案 0 :(得分:1)

您应该导入:-

import React,{Component} from 'react';

或者在中,您可以将类声明修改为:-

class Div extends React.Component{}