J'utilise l'événement onMouseMove pour suivre les coordonnées de ma souris. Lorsque j'envoie ces coordonnées comme accessoires à mon composant enfant et que je les utilise, l'accessoire est déjà en retard sur mes coordonnées de souris réelles, mais lorsque j'essaie de les utiliser dans mon composant principal, ce sont mes coordonnées de souris réelles. J'ai probablement fait une erreur avec la méthode componentDidUpdate. Quelqu'un sait-il quelle est mon erreur?
Composant principal
class Pointer extends React.Component {
componentDidUpdate(prevProps) {
this.positionElement(prevProps.coords.XCoord, prevProps.coords.YCoord);
}
positionElement = (x, y) => {
const mouse = {
x,
y
};
follower.style.top = mouse.y + "px";
return (follower.style.left = mouse.x + "px");
};
render() {
const follower = this.refs.follower;
return (
<Follower id="follower">
<Circle id="circle" />
</Follower>
);
}
}
Composant enfant
class Page extends React.Component {
state = {
XCoord: 0,
YCoord: 0
};
handleMouseMove = e => {
const XCoord = e.pageX;
const YCoord = e.pageY;
this.setState((state, props) => {
return { XCoord, YCoord };
});
};
render() {
const follower = this.refs.follower;
return (
<ThemeProvider theme={style}>
<div onMouseMove={e => this.handleMouseMove(e)} id="test">
<Head title="" />
<CreateGlobalStyle />
{this.props.children}
<Pointer coords={this.state} />
</div>
</ThemeProvider>
);
}
}
3 Réponses :
Bienvenue sur Stack Overflow!
Sur un coup d'œil rapide à votre code, on dirait que vous utilisez AVERTISSEMENT: code non testé! PrevPProps dans votre ComposantDidUpdate méthode, et c'est pourquoi Les coordonnées de la souris dans votre composant enfant semblent être en retard. Vous voudrez peut-être utiliser ceci.props au lieu de PrevPProps dans votre ComposantDidUpdate comme indiqué ci-dessous:
Merci pour votre réponse rapide! Cela fonctionne mieux mais les coordonnées sur mes accessoires sont toujours en retard sur les coordonnées réelles. Si j'utilise la fonction this.positionElement () dans mon composant principal, il se met à jour correctement mais pas dans mon composant enfant.
Peut-être que vous pouvez essayer de convertir le composant du pointeur en une fonction de réagissance à la place.
Il existe de nombreuses façons d'accomplir cela, mais la méthode la plus élémentaire ne nécessite pas l'utilisation de refs ou de componentDidUpdate. C'est possible en transférant simplement la position de votre souris vers le bas comme accessoire au composant Pointer:
Cochez cet exemple de codesandbox, il ne retarde ni ne retarde le rendu des coordonnées de la souris. < / p>
Bienvenue dans Stack Overflow!
Peut-être que changer votre pointeur de classe en une fonction pure et utiliser directement ses accessoires pourrait accélérer un peu!
Voici un extrait pour l'essayer!
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.development.js"></script> <div id="root"></div>
#test {
width:100vh;
height:100vh;
border: 2px solid gray;
}
#circle {
background-color: red;
width: 10px;
height: 10px;
border-radius: 10px;
}
#follower {
position: absolute;
}
function Pointer(props) {
return (
<div id="follower" style={{
left: props.mouse_x,
top: props.mouse_y
}}>
<div id="circle"></div>
</div>
);
}
class Page extends React.Component {
state = {
XCoord: 0,
YCoord: 0
};
handleMouseMove = e => {
const XCoord = e.pageX;
const YCoord = e.pageY;
this.setState((state, props) => {
return { XCoord, YCoord };
});
};
render() {
return (
<div>
<div onMouseMove={e => this.handleMouseMove(e)} id="test">
{this.props.children}
<Pointer
mouse_x={this.state.XCoord}
mouse_y={this.state.YCoord} />
</div>
</div>
);
}
}
ReactDOM.render(<Page />, document.querySelector('#root'))
Merci pour votre réponse! Cela fonctionne mieux, mais quand je ne crée pas de composant de fonction séparé et que j'utilise simplement une méthode dans ma classe principale, cela fonctionne beaucoup plus facilement. Problème étrange, mais au moins ça marche comme ça.