我从 Github 克隆了我已经在 Github Pages 上运行的 React-Typescript 应用程序,并希望进行一些更改。我运行 npm install 并安装了所有依赖项,但是当我运行 npm start 时,出现此错误;
我不知道 chokidar 是什么,我看了一点,我认为它与我的项目无关。我仍然尝试 npm install chokidar 并且我遇到了另一个这样的错误;
也试过npm audit fix了。修复了一些东西,但没有任何改变。
所以我无法打开开发服务器。此外,这是 package.json 文件;
// package.json
{
"name": "panflix",
"homepage": "https://absolutezero13.github.io/meerkast/",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/enzyme": "^3.10.8",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",
"@types/redux-devtools": "^3.0.47",
"axios": "^0.21.1",
"enzyme": "^3.11.0",
"firebase": "^8.2.7",
"gh-pages": "^3.1.0",
"history": "^4.10.1",
"react": "^17.0.1",
"react-bootstrap": "^1.5.0",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0", …Run Code Online (Sandbox Code Playgroud) 我意识到当我切换设备工具栏时我的双击事件不起作用。我用谷歌搜索,但我只看到了 jQuery 的东西,而且我对 jQuery 一无所知。我该如何进行这项工作?
stuff.addEventListener('dblclick', openOtherStuff)
Run Code Online (Sandbox Code Playgroud)
我正在尝试通过此事件打开一个模式。它在电脑上完美运行,在移动设备上不起作用。
这就是我的应用程序现在的样子:
搜索和排序功能是动态工作的,只要我输入一个字母,它就会找到匹配项,但会重新呈现所有匹配项。
如果我输入“饥饿”,它会找到饥饿游戏电影,但它会在已有图像时获取图像并进行渲染。有没有办法让这个过程只进行一次,这样我就不用等待每次搜索、每次排序?我使用 Redux,因此数据来自商店,商店从本地 json 文件获取数据。
我考虑过存储在本地存储上,但我无法弄清楚。如您所见,没有 ComponentDidMount 或 Hooks。
这是该页面的代码:
import React from "react";
import "./MoviesAndSeries.css";
import ListShowItem from "./ListShowItem";
import { getVisibleShows } from "../Redux/Selector";
import { connect } from "react-redux";
import FilterShowItems from "./FilterShowItems";
const Movies: React.FC = (props: any) => {
return (
<div className="movies">
<FilterShowItems />
{props.movies.map((movie: any) => {
return <ListShowItem key={Math.random()} {...movie} />;
})}
</div>
);
};
const mapStateToProps = (state: any) => {
return {
movies: getVisibleShows(state.movies, state.filters),
filters: state.filters,
};
}; …Run Code Online (Sandbox Code Playgroud) 我正在使用随机用户 api 通过 setInterval 函数获取用户信息,我的 useEffect 如下所示;
// Users.js
useEffect(() => {
const getUser = () => {
fetch("https://randomuser.me/api")
.then((res) => res.json())
.then((data) =>
setUsers((prevUsers) => {
return setUsers([
...prevUsers,
{ key: data.results[0].login.uuid, value: data.results[0] },
]);
})
);
console.log("cleanup?");
};
getUser();
// const userInterval = setInterval(getUser, 5000);
// return () => clearInterval(userInterval);
}, []);
Run Code Online (Sandbox Code Playgroud)
我使用反应导航在另一个页面中显示每个用户的详细信息并像这样导航;
<TouchableOpacity
onPress={() => navigation.navigate("userDetails", item.value)}>
Run Code Online (Sandbox Code Playgroud)
因此,当我导航到详细信息页面时,useEffect 不会返回,这意味着组件不会卸载。实际上,由于堆栈导航,页面基本上位于每个页面之上并且仍在运行。那么在这种情况下我怎样才能停止我的间隔功能呢?
在我进行快照测试之前,我有一个运行良好的组件。它说“您不应该在路由器之外使用 Link”。然后我用路由器包装了组件,但它不起作用。这是组件:
import React from "react";
import "./Body.css";
import { Link, Router } from "react-router-dom";
const Body: React.FC = () => {
return (
<div className="body">
<Router>
<Link to="/movies">
<div className=" body__item">
<p>MOVIES</p>
</div>
</Link>
<Link to="/series">
<div className=" body__item">
<p>SERIES </p>
<img src="../../../images/placeholder.png" alt="" />
</div>
</Link>
</Router>
</div>
);
};
export default Body;
Run Code Online (Sandbox Code Playgroud)
I have @types for react-router-dom so it's not the problem. I also tried wrapping around the component.
Also the full error is:
No overload matches …
我知道 React Native 有 Animated API,但据我所知,它比我在这种特殊情况下想要实现的要复杂得多。
现在我有一个按钮,当滚动到页面时,其内部的文本状态会发生变化。文本的长度不同,因此按钮必须拉伸或收缩。但当然这会立即发生,我希望它能够平滑地拉伸或收缩。在 Web 中,我们可以轻松地在 CSS 中执行类似的操作;
transition: all 0.3s ease;
Run Code Online (Sandbox Code Playgroud)
当您不想添加额外的动画时,这就足够了。那么 React Native 中这种行为的等价物是什么?
reactjs ×6
javascript ×5
react-native ×2
typescript ×2
chokidar ×1
events ×1
json ×1
material-ui ×1
npm ×1
react-hooks ×1
react-router ×1
redux ×1