将破折号的(plotly)反应功能组件转换为 class 组件
Converting dash's(plotly) react functional component into class component
我刚刚了解到破折号的 Create your own components . I'm also new in react. I generally prefer to write component in react in class. I created a react file where I dumped the source code of dash html component 。 Div组件写在函数中。我想将这个 Div 组件转换成 class。这是我在做什么 -
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;
但是我对 class 进行的这种转换不起作用。我究竟做错了什么? Div 组件到 class 的正确转换是什么?
谢谢:)
您应该导入:-
import React,{Component} from 'react';
或者您可以将 class 声明修改为:-
class Div extends React.Component{}
我刚刚了解到破折号的 Create your own components . I'm also new in react. I generally prefer to write component in react in class. I created a react file where I dumped the source code of dash html component 。 Div组件写在函数中。我想将这个 Div 组件转换成 class。这是我在做什么 -
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;
但是我对 class 进行的这种转换不起作用。我究竟做错了什么? Div 组件到 class 的正确转换是什么?
谢谢:)
您应该导入:-
import React,{Component} from 'react';
或者您可以将 class 声明修改为:-
class Div extends React.Component{}