Questions tagged «reactjs»

我一直在使用React项目，create-react-app并且有两个选项可以启动该项目： 第一种方式： npm run start定义package.json如下： "start": "react-scripts start", 第二种方式： 和 npm start 这两个命令有什么区别？的目的是react-scripts start什么？ 我试图找到定义，但我只是找到一个带有名称的包，而我仍然不知道该命令的含义。

175 reactjs  npm 

在React的官方文档中，它提到- 如果您熟悉React类的生命周期方法，则可以将useEffect Hook视为componentDidMount，componentDidUpdate和componentWillUnmount的组合。 我的问题是-我们如何componentWillMount()在钩子中使用lifecyle方法？

175 javascript  reactjs  jsx  react-hooks 

我对React JS非常陌生（例如，从今天开始）。我不太了解setState的工作方式。我将React和Easel JS结合起来，根据用户输入绘制网格。这是我的JS bin：http：//jsbin.com/zatula/edit？ js，输出 这是代码： var stage; var Grid = React.createClass({ getInitialState: function() { return { rows: 10, cols: 10 } }, componentDidMount: function () { this.drawGrid(); }, drawGrid: function() { stage = new createjs.Stage("canvas"); var rectangles = []; var rectangle; //Rows for (var x = 0; x < …

174 javascript  reactjs  setstate 

使用React 16.8.6（在以前的版本16.8.3中很好），当我尝试防止在获取请求上发生无限循环时，出现此错误 ./src/components/BusinessesList.js Line 51: React Hook useEffect has a missing dependency: 'fetchBusinesses'. Either include it or remove the dependency array react-hooks/exhaustive-deps 我一直找不到停止无限循环的解决方案。我想远离使用useReducer()。我确实在https://github.com/facebook/react/issues/14920找到了这个讨论，在这里可能的解决方案是You can always // eslint-disable-next-line react-hooks/exhaustive-deps if you think you know what you're doing.我不确定自己在做什么，所以我还没有尝试实现它。 我有这个当前设置，React钩子useEffect永远/无限循环连续运行，唯一的注释是useCallback()我不熟悉的。 我目前的使用方式useEffect()（类似于，我一开始只想运行一次componentDidMount()） useEffect(() => { fetchBusinesses(); }, []); const fetchBusinesses = () => { …

174 reactjs  eslint  create-react-app  react-hooks 

我使用该create-react-app软件包创建了一个ReactJS项目，该项目运行良好，但找不到Webpack文件和配置。 react-create-app如何与webpack一起使用？默认情况下，使用以下命令安装的webpack配置文件在哪里create-react-app？我在项目的文件夹中找不到配置文件。 我尚未创建替代配置文件。我可以与其他文章一起管理配置设置，但是我想找到常规的配置文件。

172 javascript  reactjs  webpack  ecmascript-6  create-react-app 

在元素上设置元素的innerHTML与在元素上设置危险地设置InnerHTML属性有什么“幕后”区别？假设为简单起见，我正在对事物进行适当的消毒。 例： var test = React.createClass({ render: function(){ return ( <div contentEditable='true' dangerouslySetInnerHTML={{ __html: "Hello" }}></div> ); } }); 与 var test = React.createClass({ componentDidUpdate: function(prevProp, prevState){ this.refs.test.innerHTML = "Hello"; }, render: function(){ return ( <div contentEditable='true' ref='test'></div> ); } }); 我做的事情比上面的示例复杂一些，但总体思路是相同的

171 javascript  html  reactjs 

我是React.js的新手，如果这个问题对您来说太愚蠢了，对不起。 我试图在输入字段为空时禁用按钮。在React中，什么是野兽方法？ 我正在执行以下操作： <input ref="email"/> <button disabled={!this.refs.email}>Let me in</button> 这样对吗？ 这不仅仅是动态属性的复制，因为我也很好奇关于将数据从一个元素传输/检查到另一个元素的好奇。

168 reactjs 

使用此代码： import React from 'react'; import { Link } from 'react-router'; import { View, NavBar } from 'amazeui-touch'; import * as Pages from '../components'; const { Home, ...Components } = Pages; 我收到此错误提示： 7:16 error Parsing error: Unexpected token .. Why? 这是我的eslint配置： { "extends": "airbnb", "rules": { /* JSX */ "react/prop-types": …

168 javascript  reactjs  eslint 

我正在使用React和Redux开发一个Web应用程序，当我开始我的项目时，我得到了这个： Line 13: Unexpected use of 'location' no-restricted-globals Search for the keywords to learn more about each error. 我搜索了很多有关如何解决它的方法，但是找不到任何答案对我有帮助，因此我转向了堆栈溢出。 有人知道如何解决此错误吗？感谢您能获得的所有帮助。

168 javascript  reactjs  react-router  eslint 

在为复选框状态分配默认值后，我无法更新复选框状态 checked="checked"在React中。 var rCheck = React.createElement('input', {type: 'checkbox', checked:'checked', value: true}, 'Check here'); 分配后checked="checked"，我无法通过单击取消选中/选中来交互复选框状态。

168 reactjs  checkbox 

我正在尝试根据组件的类型动态呈现组件。 例如： var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> 我尝试了这里提出的解决方案React / JSX动态组件名称 这给我一个编译时的错误（使用browserify进行gulp）。我使用数组语法的地方应该是XML。 我可以通过为每个组件创建一个方法来解决此问题： newExampleComponent() { return <ExampleComponent />; } newComponent(type) { return this["new" + type + "Component"](); } 但这将意味着为我创建的每个组件提供一种新方法。必须对此问题有一个更优雅的解决方案。 我很乐意提出建议。

167 javascript  reactjs  react-jsx 

我目前正在阅读React-Native教程。我从入门教程开始，在该教程中，我创建了一个新的react native项目，并成功地在设备上运行了该项目。 然后，我开始了Props教程，复制了代码片段并尝试再次运行该项目，并在屏幕上显示了以下错误消息：

166 javascript  facebook  reactjs  react-native 

如何从本地目录加载图像并将其包含在reactjs img src标记中？ 我有一个名为图像one.jpeg相同的文件夹我的组件里面，我都尝试<img src="one.jpeg" />和<img src={"one.jpeg"} />我的内部render功能，但图像显示不出来。另外，webpack config由于该项目是使用官方create-react-app命令行util 创建的，因此我无权访问文件。 更新：如果我首先导入图像import img from './one.jpeg'并在内部使用它img src={img}，则此方法有效，但是我要导入的图像文件太多，因此，我想以形式使用它们img src={'image_name.jpeg'}。

166 reactjs 

我可以http://catfacts-api.appspot.com/api/facts?number=99通过邮递员到达终点，然后返回JSON 另外，我正在使用create-react-app，并希望避免设置任何服务器配置。 在我的客户端代码中，我试图用来fetch做同样的事情，但是出现错误： 所请求的资源上没有“ Access-Control-Allow-Origin”标头。因此，不允许访问源' http：// localhost：3000 '。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。 所以我试图将一个对象传递到我的Fetch中，这将禁用CORS，如下所示： fetch('http://catfacts-api.appspot.com/api/facts?number=99', { mode: 'no-cors'}) .then(blob => blob.json()) .then(data => { console.table(data); return data; }) .catch(e => { console.log(e); return e; }); 有趣的是，我得到的错误实际上是此函数的语法错误。我不确定我的实际值fetch是否已损坏，因为当我删除{mode：'no-cors'}对象，并为其提供不同的URL时，它就可以正常工作。 我也尝试传递对象{ mode: 'opaque'}，但这会从上面返回原始错误。 我相信我所需要做的就是禁用CORS。我想念什么？

166 javascript  reactjs  cors  create-react-app  fetch-api 

我目前正在将React应用程序迁移到TypeScript。到目前为止，这很好用，但是我render分别对函数的返回类型和函数组件有问题。 到目前为止，我一直将其JSX.Element用作return类型，现在，如果组件决定不呈现任何内容（即return）null，null则此方法将不再起作用，因为没有有效的值JSX.Element。这是我旅程的开始，因为现在我在网上搜索并发现您应该使用ReactNode它，它还包括null可能发生的其他一些事情。这似乎是更好的选择。 但是，现在在创建功能组件时，TypeScript会抱怨ReactNode类型。再次，经过一些搜索，我发现对于功能组件，应该ReactElement改为使用。但是，如果我这样做了，兼容性问题就消失了，但是现在TypeScript再次抱怨null不是有效值。 因此，总而言之，我有三个问题： 之间有什么区别JSX.Element，ReactNode和ReactElement？ 为什么render类组件的方法返回ReactNode，而函数组件返回ReactElement？ 我该如何解决null呢？

166 javascript  reactjs  typescript