reactjs

问题 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<

问题 We are building our new website entirely in React and utilizing code-splitting & scss. Whenever a new page is requested it loads the raw HTML in the browser first and then a split second or so later the css styling comes in, seems to be a FOUC issue. This makes for a terrible experience and we need to figure out how to ensure the CSS is loaded before rendering the component(s). Does anyone have any experience with this? There seems to be a lack of information online currently with this issue.

问题 We are building our new website entirely in React and utilizing code-splitting & scss. Whenever a new page is requested it loads the raw HTML in the browser first and then a split second or so later the css styling comes in, seems to be a FOUC issue. This makes for a terrible experience and we need to figure out how to ensure the CSS is loaded before rendering the component(s). Does anyone have any experience with this? There seems to be a lack of information online currently with this issue.

问题 I have a function that looks at the provided children and if a particular element type is found, it adds some properties to it automatically. The function is called like this: render () { const { children, name, className } = this.props; return ( <div className={className}> {this.enrichRadioElements(children, name)} </div> ) } and it is implemented like this: enrichRadioElements = (children: Array<any>, name: string) => ( React.Children.map(children, child => { if (!React.isValidElement(child

问题 I have a function that looks at the provided children and if a particular element type is found, it adds some properties to it automatically. The function is called like this: render () { const { children, name, className } = this.props; return ( <div className={className}> {this.enrichRadioElements(children, name)} </div> ) } and it is implemented like this: enrichRadioElements = (children: Array<any>, name: string) => ( React.Children.map(children, child => { if (!React.isValidElement(child

问题 I'm using Webpack for the first time. Currently everything is being served up quite nicely. My problem is when I'm trying to build a dist folder. Currently I get my index.html and bundle.js files but I can't figure out how to push my assets to the dist folder. I have file-loader loaded up but it doesn't actually seem to do what I want it to and none of the google searches I've run are telling me what I need to know. Below is my config file. Can someone lead a horse to water? Also once I get

问题 I'm having issues disabling certain options within a large list within a React Select element. I have around 6,500 options that get loaded into the select. At first I was having issues with the search functionality lagging but then I started using react-select-fast-filter-options which took care of that problem. Now the issue is that I need to disable certain options depending on the propType "picks". Here is the code: import React, {Component} from 'react' import PropTypes from 'prop-types';

问题 I want to change the theme color of the App. like my present theme is light but I want to change the theme like Dark Mode with helping the toggle button. Some work is doing in my Application. link: https://www.howtogeek.com/361407/how-to-enable-dark-mode-for-youtube/ I build this application but in not working Global, Its only work in the present page like working in the setting page but not working the home page or profile page I don't have source code but I working this type https://www

问题 let say i have an array with two items i want to make a click event that will show some content for the specific index i clicked for example : let array = [ {name:test}, {name:test2} ] this.array.map((item,index)=>{ return( <div> {item.name} <button onClick={()=>this.showContentFunction()} >show content</button> {this.renderContent()} </div> ) }) now it will show two items i want to click on the first item button and showing the hidden content only under the same item index and not for all

问题 let say i have an array with two items i want to make a click event that will show some content for the specific index i clicked for example : let array = [ {name:test}, {name:test2} ] this.array.map((item,index)=>{ return( <div> {item.name} <button onClick={()=>this.showContentFunction()} >show content</button> {this.renderContent()} </div> ) }) now it will show two items i want to click on the first item button and showing the hidden content only under the same item index and not for all