reactjs

问题 I want to check to see if a particular element, when clicked, has a specified class. I know that you can bind a click handler which passes e.target to the handler. My thinking was to get e.target.classList.indexOf(this.myClass) > -1 to see if it has the class, but I get the following error. e.target.classList.indexOf is not a function I assume this is because classList is an array-like object, and not an actual array. Is there a simpler way to get a list of classes from a clicked element in

问题 In the React documentation for hooks they say: "This also allows you to handle out-of-order responses with a local variable inside the effect" useEffect(() => { let ignore = false; async function fetchProduct() { const response = await fetch('http://myapi/product/' + productId); const json = await response.json(); if (!ignore) setProduct(json); } fetchProduct(); return () => { ignore = true }; }, [productId]); Demo app Please help me understand this better by explaining: Why is the return a

问题 In the React documentation for hooks they say: "This also allows you to handle out-of-order responses with a local variable inside the effect" useEffect(() => { let ignore = false; async function fetchProduct() { const response = await fetch('http://myapi/product/' + productId); const json = await response.json(); if (!ignore) setProduct(json); } fetchProduct(); return () => { ignore = true }; }, [productId]); Demo app Please help me understand this better by explaining: Why is the return a

问题 In the React documentation for hooks they say: "This also allows you to handle out-of-order responses with a local variable inside the effect" useEffect(() => { let ignore = false; async function fetchProduct() { const response = await fetch('http://myapi/product/' + productId); const json = await response.json(); if (!ignore) setProduct(json); } fetchProduct(); return () => { ignore = true }; }, [productId]); Demo app Please help me understand this better by explaining: Why is the return a

问题 In the React documentation for hooks they say: "This also allows you to handle out-of-order responses with a local variable inside the effect" useEffect(() => { let ignore = false; async function fetchProduct() { const response = await fetch('http://myapi/product/' + productId); const json = await response.json(); if (!ignore) setProduct(json); } fetchProduct(); return () => { ignore = true }; }, [productId]); Demo app Please help me understand this better by explaining: Why is the return a

问题 I would like to use React's memo for a function that has a generic argument. Unfortunately the generic argument defaults to the generic and all the fancy generic deduction logic is lost (TypeScript v3.5.2). In the example below WithMemo (using React.memo ) fails with: Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'. while the WithoutMemo works just as expected. interface TProps<T extends string | number> { arg: T; output: (o: T) =>

问题 I would like to use React's memo for a function that has a generic argument. Unfortunately the generic argument defaults to the generic and all the fancy generic deduction logic is lost (TypeScript v3.5.2). In the example below WithMemo (using React.memo ) fails with: Property 'length' does not exist on type 'string | number'. Property 'length' does not exist on type 'number'. while the WithoutMemo works just as expected. interface TProps<T extends string | number> { arg: T; output: (o: T) =>

问题 For example, if I have components A and B, and component B is the child of component A: <A> <B /> </A> Inside A we have: useEffect(() => { console.log('Parent A useEffect') }) Inside B we have: useEffect(() => { console.log('Child B useEffect') }) I did some tests and I saw 2 things: At the first load (after F5, for example), the log result is: Parent A useEffect Child B useEffect If we go to another component and then come back to component B (not by reloading but by using react-router, for

问题 I am trying to build a mini 2-track audio player with React. The audio is centrally controlled by a html audio element with a track-list inside a child component. The (yet to be styled) player can be seen here. I can tell in the React dev tools that clicking the individual track select buttons does update the src of the audio element (thanks to the help of a member on here), however, the playing audio doesn't change. I've posted the Application code below. Is it even possible to change the

问题 I am building a carousel right now, in React. To scroll to the individual slides I am using document.querySelector like so : useEffect(() => { document.querySelector(`#slide-${activeSlide}`).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' }); }, [activeSlide]); Is this bad practice? After all, I am accessing the DOM directly here? What would be the React way of doing this? edit: full return method return ( <> <button onClick={() => setActiveSlide(moveLeft)}>PREV<