如何在基于类的反应中呈现值

Question

我怎么可能渲染SubmitState的值，使_setTooltipContent()得到SubmitState的更新值

SubmitState的redux值

const SubmitState = useSelector((state) => state.SubmitState);

我有这个基于类的react

class ElementEditor {
constructor($element) {
this.$element = findNearestChild($element);
dispatch(selectedElement(this.$element));
if (!this.$element) {
this.type = 'empty';
this.$element = $element;
} else {
this.type = this.$element.prop('nodeName');
}
}
init() {
//todo: if no innerText show uneditable option
getTooltip(this.type);
dispatch(elementType(this.type));
$(window).on('keyup', this._onKeyUp.bind(this));
this._setTooltipContent();
}
_onKeyUp(e) {
if (e.keyCode === 27) {
this.close();
}
}
_removeListeners() {
$(window).off('keyup', this._onKeyUp.bind(this));
}
_setTooltipContent() {
if (this.type.toLowerCase() === 'img') {
dispatch(selectedImg(this.$element.prop('src')));
} else {
dispatch(selectedText(this.$element.html()));
}
if (SubmitState) {
if (this.type.toLowerCase() === 'img') {
var img = document.getElementById('imgUrl');
var imgsrc = img.getAttribute('src').toString();
this.$element.css('height', this.$element.innerHeight());
this.$element.css('width', this.$element.innerWidth());
this.$element.prop('src', imgsrc === '#' ? imgValue : imgsrc);
} else {
this.$element.html(textValue);
}
this.close();
}
if (CloseState) {
this.close();
}
}
close() {
this._removeListeners();
}
static isInsideTooltip($element) {
return $element.parents('.se-tooltip-content').length;
}
render() { return null }
}

如何使用componentDidMount()?请帮助

Answer 1

import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

useEffect可以帮助你处理SubmitState您可以从useEffect

中看到更多信息和示例。