reactjs

问题 I am looking to integrate motion animation as my background in my React project. I'm trying to add a firefly animation into a component within react (and the code I'm trying to use is here https://codepen.io/celli/pen/xZgpvN ). function App() { return <Background total={25} / > } ReactDOM.render( <App / > , document.querySelector("#container")) <div id="container" /> <!-- React --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script

问题 this is a typescript-next.js project. I have this Modal component: interface ModalProps { onCancelModal: () => void; onAcceptModal: () => void; acceptEnabled: boolean; isLoading?: boolean; title: string; } const Modal: React.FC<ModalProps> = (props) => { let containerRef = useRef<HTMLDivElement | null>(null); console.log("container", containerRef); useEffect(() => { const rootContainer = document.createElement("div"); const parentElem = document.querySelector("#__next"); parentElem?

问题 I'm now trying to feed the position of the user through the variable (coords) but every time I pass any variable into onClickUserLoc() the variable has the error Cannot read property 'lat' of undefined and when I console.log it states undefined? The coords variable holds an array of location data such as lng and lat but become undefined in onClickUserLoc(). Code: export default class App extends React.Component { constructor() { super(); this.state = { ready: false, where: { lat: '', lng: ''

问题 Codesandbox as always: https://codesandbox.io/s/busy-leaf-onnqq I have a react class that renders sets of divs, which contain inner divs with values set by values associated with indices in a JSON array. Currently, I am scaling divs using translate: import React, { Component } from "react"; import "./Maps.css"; import df3 from "./data/df3.json"; class Maps extends Component { constructor() { super(); const data = df3; this.state = data; } renderDiv = () => { var df4 = df3["Devotions"];

问题 I have the following code: import React, { useState, useEffect } from "react" function callSearchApi(userName: string, searchOptions: SearchOptions, searchQuery: string): Promise<SearchResult>{ return new Promise((resolve, reject) => { const searchResult = searchOptions.fooOption ? ["Foo 1", "Foo 2", "Foo 3"] : ["Bar 1", "Bar 2"] setTimeout(()=>resolve(searchResult), 3000) }) } type SearchOptions = { fooOption: boolean } type SearchResult = string[] export type SearchPageProps = { userName:

问题 I wrote a React application and used jest to write unit tests. when I run it by "jest --config=jest.config.json --watch" I get the following error: Test suite failed to run /home/user/Projects/react-game/src/Square.css:1 ({"Object.> ":function(module,exports,require,__dirname,__filename,global,jest){.bluePawn, .blueMasterPawn, .redPawn, .redMasterPawn { ^ SyntaxError: Unexpected token . at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)

问题 I want to fetch data from API and show frontend using react but I am getting error from frontend side which is (TypeError: answers.map is not a function ) so how can I solve this error -- MY CODE IS - import React, { useState, useEffect } from "react"; import Poll from "react-polls"; import { getPolls } from "../helper/coreapicalls"; const MainPoll = () => { const [polls, setPoll] = useState([]); const [error, seterror] = useState(false); // Setting answers to state to reload the component

问题 I am trying to simply render the props.item 's value based on parent state but it is always showing the initial value. However, inside useEffect the props.item has the updated value. How can I make use of the updated props values without saving it into state ? In Component based classes this would of worked without state. //EDIT: Parent: function App() { const [activePageIndex, setActivePageIndex] = useState(0); const changeActivePageIndex = (index) => { setActivePageIndex(index); }; return (

问题 I am trying to simply render the props.item 's value based on parent state but it is always showing the initial value. However, inside useEffect the props.item has the updated value. How can I make use of the updated props values without saving it into state ? In Component based classes this would of worked without state. //EDIT: Parent: function App() { const [activePageIndex, setActivePageIndex] = useState(0); const changeActivePageIndex = (index) => { setActivePageIndex(index); }; return (

问题 I am new to React and have a question regarding passing down functions in a state. I have a couple of 'sorting functions' in my util folder, which look like this: export const sortColdestSummerCountries = (filteredCountries) => { return filteredCountries.sort( (a, b) => a.avsummertemp20802099 - b.avsummertemp20802099 ); }; and a few others: sortHighestSummerTemp, sortLargestIncreaseHotDays, sortColdestSummerCountries, sortMostColdDays, sortWorstAffectedCountries which pretty much look similar