Questions tagged «reactjs»

我正在用VS代码编写一个React项目。我在VS代码中遇到了这个问题。在我的项目中，此文件夹显示“包含强调的项目”，我知道这意味着我的文件中有错误。但是在图片中 ， 我已经检查了所有文件，但没有发现错误。所以这让我感到困惑。 我在谷歌搜索此问题，发现类似的github问题。https://github.com/Microsoft/vscode/issues/54960 希望可以有人帮帮我。谢谢

16 reactjs  visual-studio-code 

当尝试在生产版本上访问我的MERN应用程序的Login组件时，此图像中显示了一系列以下类型错误： 我的应用程序（https://github.com/ahaq0/kumon_schedule）在本地运行良好，并且在今天早些时候在Heroku上托管的运行良好。 我尝试回滚我今天所做的代码中的所有更改，但均无济于事。同样，我检查了package.json（和.lock）以查看是否更改了材料UI依赖关系，但这是相同的。我似乎无法弄清楚为什么它突然在这里的托管版本上停止工作。 错误行的代码如下。但是，我没有编写内容，因为它是用户界面的一部分。 if (sheetManager.dynamicStyles) { var dynamicSheet = stylesOptions.jss.createStyleSheet(sheetManager.dynamicStyles, _extends({ link: true }, options)); dynamicSheet.update(props).attach(); state.dynamicSheet = dynamicSheet; state.classes = mergeClasses({ baseClasses: sheetManager.staticSheet.classes, newClasses: dynamicSheet.classes }); if (sheetsRegistry) { sheetsRegistry.add(dynamicSheet); } } else { state.classes = sheetManager.staticSheet.classes; } sheetManager.refs += 1; 这是我第一个部署的应用程序，尽管我尽了最大的努力来回退，但我却迷失了从工作到不工作的所有过程。 编辑。我应该提到我在错误日志来自的Firefox和Chrome中进行了测试。 编辑＃2。经过更多的调试后，我发现如果我回滚以通过Heroku提交fccc55a5，则错误消失了。但是，如果我使用该提交创建了一个新分支并尝试部署该分支，它将无法正常工作。 请在这里查看 https://github.com/ahaq0/kumon_schedule/compare/fccc55a5...fccc55a5 当我恢复到Heroku中的最后一个版本时，它将起作用。但是，如果我将先前的提交合并到新分支中并尝试部署它，则不会。

15 reactjs  typescript  heroku  material-ui  mern 

我有一个由create-react-app创建的React应用。在运行npm start（启动脚本在package.json中以“ start”：“ react-scripts start”形式存在）之后，控制台会像往常一样启动开发服务器并启动浏览器。但是在此之后，控制台和浏览器都将无限期地执行任何操作。没有错误或输出。它根本什么也没做。

15 reactjs  npm  create-react-app  react-scripts 

我最近开始在Expo中使用TypeScript。我已经完成了所有的linter / formatter集成，typescript-eslint因此我可以在编码过程中捕获大多数错误。为了检查代码是否可以编译，我不时运行npx tsc一次，并进行相应的修复。 我尚未完全掌握的一件事是，即使有许多编译错误，我的应用程序仍能成功构建的原因。我希望（并希望）针对每个编译错误都看到一个红色屏幕错误，而不是应用程序构建成功，然后我找到了它。例如， function square<T>(x: T): T { console.log(x.length); // error TS2339: Property 'length' does not exist on type 'T'. return x * x; } 是典型的TypeScript错误，我相信吗？在编译时可以很容易地检查该错误。我希望它导致大的红色屏幕错误，并且构建失败。 我是TypeScript的新手，所以有可能我错过了一些非常重要的内容。究竟是什么原因导致这种宽大处理，有没有办法实施更严格的检查？

15 reactjs  typescript  react-native  expo 

我是Next.js的新手，并且想知道如何从起始页（/）重定向到/ hello-nextjs。用户加载页面后，确定路径是否=== /重定向至/ hello-nextjs 在react-router中，我们执行以下操作： <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

我正在尝试基于应获取URL参数（id）的react-router-dom路由加载详细信息视图，并使用该参数进一步填充组件。 我的路线看起来很像，/task/:id并且我的组件加载正常，直到我尝试像这样从URL抓取：id为止： import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } = useParams(); this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } export default TaskDetail; 这会触发以下错误，我不确定在哪里正确实现useParams（）。 Error: Invalid hook call. Hooks …

14 reactjs  react-router 

我看到React.forwardRef似乎是从react docs传递ref到子功能组件的批准方法： const FancyButton = React.forwardRef((props, ref) => ( <button ref={ref} className="FancyButton"> {props.children} </button> )); // You can now get a ref directly to the DOM button: const ref = React.createRef(); <FancyButton ref={ref}>Click me!</FancyButton>; 但是，与仅通过自定义道具相比，这样做的好处是什么？： const FancyButton = ({ innerRef }) => ( <button ref={innerRef} className="FancyButton"> {props.children} </button> )); const …

13 javascript  reactjs  performance 

我正在尝试使用create-react-appdocs上给出的命令创建一个新项目，即npx create-react-app my-app它不包含public src和的文件夹script。

13 reactjs  create-react-app 

我已经经历了两个类似的定义： 纯函数是不尝试更改其输入的函数，并且对于相同的输入始终返回相同的结果。 例 function sum(a, b) { return a + b; } 不纯函数是一种更改其自身输入的函数。 例 function withdraw(account, amount) { account.total -= amount; } 定义和代码片段摘自ReactJs 官方文档。 现在，有人可以告诉我，如何在React / Redux中犯一些错误，以在需要纯函数的地方使用不纯函数？

12 javascript  reactjs  redux 

我正在创建一个可共享的React组件库。 该库包含许多组件，但最终用户可能只需要使用其中一些组件。 当您将代码与Webpack（或Parcel或Rollup）捆绑在一起时，它将使用所有代码创建一个文件。 出于性能原因，除非实际使用该代码，否则我不希望浏览器下载所有这些代码。我是否认为我不应该捆绑组件是正确的吗？捆绑产品应该留给组件的使用者使用吗？我是否还要将其他东西留给组件的使用者？我只是编译JSX就是这样吗？ 如果同一仓库包含很多不同的组件，那么main.js应该是什么？

12 reactjs  npm  webpack  es6-modules  rollup 

我对如何使用popup（window.open）在React中实现OAuth感兴趣。 例如，我有： mysite.com -这是我打开弹出窗口的地方。 passport.mysite.com/oauth/authorize - 弹出。 主要问题是如何在window.open（popup）和（popup）之间建立连接（window.opener众所周知，由于跨域安全性，window.opener为null，因此我们不能再使用它了）。 ⇑ window.opener每当您导航到不同的主机（出于安全原因）被删除，有没有办法解决它。如果可能的话，唯一的选择应该是在框架内付款。最上面的文档需要保留在同一主机上。 方案： 可能的解决方案： 使用此处setInterval所述检查打开的窗口。 使用交叉存储（不值得imho）。 那么，2019年推荐的最佳方法是什么？ React包装器-https: //github.com/Ramshackle-Jamathon/react-oauth-popup

12 javascript  reactjs  oauth  popup  authorization 

我想使用Autocompletecomponent作为输入标签。我正在尝试获取标签并将它们保存在一个状态，以便以后可以将它们保存在数据库中。我在反应中使用函数而不是类。我确实尝试过onChange，但没有得到任何结果。 <div style={{ width: 500 }}> <Autocomplete multiple options={autoComplete} filterSelectedOptions getOptionLabel={option => option.tags} renderInput={params => (<TextField className={classes.input} {...params} variant="outlined" placeholder="Favorites" margin="normal" fullWidth />)} />

12 reactjs  material-ui 

React Hooks给了我们useState选项，我总是看到Hooks与Class-State的比较。但是Hooks和一些常规变量呢？ 例如， function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 我没有使用Hooks，它将为我带来以下结果： function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } 那么区别是什么？在这种情况下，使用Hooks更加复杂...那为什么要开始使用它呢？

12 javascript  node.js  reactjs  react-hooks 

这是我使用内联箭头功能更改onClickdiv 路线的组件，但我知道这不是性能方面的好方法 1.内联箭头功能 changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2.如果我使用构造函数绑定，那么如何传递道具？ constructor() { super(props) this.changeRoute = this.changeRoute.bind(this) } changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={this.changeRoute}>1</div> <div onClick={this.changeRoute}>2</div> </> ) } 3.如果我删除了箭头函数，则该函数将在渲染本身上被调用 …

11 javascript  reactjs 

我已经安装material-ui / lab以便使用警报组件，但是每当我使用以下命令导入它时：import Alert from '@material-ui/lab/Alert';它无法编译并引发此错误： ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. 因此，我尝试通过Google搜索此问题，发现了另一个有关该material-ui/lab/AutoComplete组件的问题（确切地说是这个问题），并且可接受的答案是将material-ui / core更新为4.9.9版，对于要求该功能的人来说，它似乎很有效，但可惜不是我，我拥有所有已安装material-ui的这个版本： "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", 所以现在我问你们是否还有另一种方法可以解决这个问题，谢谢

11 javascript  node.js  reactjs  material-ui