如何在 reactjs 中使用窗口、文档事件和 appendChild 等 createElement

Question

我对一些关于 reactjs 需要解决的想法感到困惑，

我首先尝试了原版javascript，我还需要相同的设计 reactjs

请参阅下面的代码段。

对于香草 Js

document.onmousemove = myFunction;
function myFunction(e){
let span = document.createElement('span');
document.body.appendChild(span);
span.setAttribute('style', `width: 20px; height: 20px; background: red; position: absolute; top: ${e.clientY}px; left: ${e.clientX}px`)
}

和 我试过了的反应，

class App extends React.Component {
state = {
setTop: '',
setLeft: '',
}
componentDidMount() {
document.onmousemove = this.myFunction;
}
myFunction = (e) => {
this.setState({
setTop: e.clientY,
setLeft: e.clientX
});

}
render() {
const spanStyle = {
position: 'absolute',
width: '20px',
height: '20px',
background: 'red',
top: this.state.setTop + 'px',
left: this.state.setLeft + 'px'
}
return ( <
div className = "App" >
<
span style = {
spanStyle
} > < /span> < /
div >
)
}
}
ReactDOM.render( < App / > , window.root)

对于 ReactJs，span 标签不会增加，而 vanilla js 所做的，对于 reactjs 来说，代码没有很好的意义，我需要 reactjs 这段代码的纯粹想法，如果没有组件和短代码概念，那会很好。

Answer 1

我已经在codeSandBox上创建了代码，请单击此处。

这将回答您的问题。我已经用 React 制作了你的原版代码的精确副本。

问题在于您的代码没有创建新span，在您的代码中我们只有一个span并且它的样式随着鼠标移动而不断更新。

import React, { Fragment } from "react";
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
divs: []
};
this.myFunction.bind(this);
}
componentDidMount() {
document.addEventListener("mousemove", this.myFunction.bind(this), false);
}
myFunction(e) {
let style = {
width: "20px",
height: "20px",
background: "red",
position: "absolute",
top: `${e.clientY}px`,
left: `${e.clientX}px`
};
let s = <span style={style} />;
this.setState(prevState => ({
divs: [...prevState.divs, s]
}));
}
render() {
return (
<Fragment>
Test loadeed.
{this.state.divs}
</Fragment>
);
}
}
export default Test;

只需在您的 App.js 文件中添加<Test />，您就会得到您想要的。