Questions tagged «reactjs»

我正在尝试使用本教程使ReactJS与rails一起使用。我收到此错误： Uncaught ReferenceError: React is not defined 但我可以访问浏览器控制台中的物体做出反应 我还添加了公共/距离/涡轮react.min.js描述这里，也加入如描述的application.js线在这个答案没有运气。此外，给出错误：//= require components var React = require('react') Uncaught ReferenceError: require is not defined 谁能建议我解决这个问题？ [EDIT 1] 供参考的源代码： 这是我的comments.js.jsx文件： var Comment = React.createClass({ render: function () { return ( <div className="comment"> <h2 className="commentAuthor"> {this.props.author} </h2> {this.props.comment} </div> ); } }); var ready = …

89 javascript  ruby-on-rails  reactjs 

我想将CSS文件导入React组件。 我已经尝试过，import disabledLink from "../../../public/styles/disabledLink";但是下面出现错误； 找不到模块：错误：无法解析c：\ Users \ User \ User \ Documents \ pizza-app \ client \ src \ components @中的“文件”或“目录” ../../../public/styles/disabledLink。 /client/src/components/ShoppingCartLink.js 19：20-66哈希：2d281bb98fe0a961f7c4版本：webpack 1.13.2 C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css 是我要加载的CSS文件的位置。 在我看来，导入似乎没有找到正确的路径。 我以为../../../它将开始查找上面三个文件夹层的路径。 C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js 是应导入CSS文件的文件的位置。 我在做什么错，我该如何解决？

89 javascript  reactjs  relative-path 

文本输入居中对齐，如何解决此文本输入问题，使其从左上角获取输入 这是我的CSS输入文字 /* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */ input: { flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150 }

89 javascript  ios  reactjs  react-native 

我通常在Stack上发布与代码相关的内容，但这更多是关于社区的一般思想的问题。 似乎有很多人主张将Redux与React结合使用来管理数据/状态，但是在阅读和学习两者的过程中，我遇到了一些看起来不太正确的事情。 Redux 在此页面底部：http : //redux.js.org/docs/basics/UsageWithReact.html（通过商店），建议您使用React“上下文”的“魔术”。 一种选择是将其作为道具传递给每个容器组件。但是，这很繁琐，因为您甚至必须通过演示组件来进行存储，因为它们恰好在组件树中渲染了一个容器。 我们建议的选项是使用特殊的React Redux组件，以神奇方式使商店可用于所有容器组件... 反应 在React Context页面（https://facebook.github.io/react/docs/context.html）上，它在顶部有一个警告： 上下文是一项先进的实验功能。该API可能会在将来的版本中更改。 然后在底部： 正如在编写清晰的代码时最好避免使用全局变量一样，在大多数情况下，您应该避免使用上下文... 不要使用上下文来通过组件传递模型数据。显式地将数据线程穿过树很容易理解... 所以... Redux建议使用React的“上下文”功能，而不是store通过“ props” 将其传递给每个组件。而React建议相反。 而且，似乎Dan Abramov（Redux的创建者）现在为Facebook（React的创建者）工作，只是让我更加困惑。 我可以阅读所有这些吗？ 当前在这个问题上的普遍共识是什么？

88 javascript  reactjs  redux 

这是数字 min + gzip 26k gzip 90k 原始450 + k 而且React在其文档中没有很多功能。为什么这么大？ 我感觉这是轻量级DOM的实现。但我想确定。

88 reactjs 

我正在努力通过以下语法找出问题所在： export const sendVerificationEmail = async () => (dispatch) => { try { dispatch({ type: EMAIL_FETCHING, payload: true }); await Auth.sendEmailVerification(); dispatch({ type: EMAIL_FETCHING, payload: false })) } catch (error) { dispatch({ type: EMAIL_FETCHING, payload: false }); throw new Error(error); } }; 我不断收到错误消息： 等待是保留字 ...但是在异步函数中不合法吗？ 调度位来自react-thunk库。

88 javascript  reactjs  async-await  redux 

我有自己的单元测试reducers。但是，当我在浏览器中调试时，我想检查我的动作是否已正确调用以及状态是否已相应修改。 我正在寻找类似的东西： window._redux.store ...在浏览器中，这样我就可以在控制台上键入该信息并检查运行情况。 我该如何实现？

88 javascript  reactjs  redux 

我正在迁移带有TypeScript的React项目以使用挂钩功能（React v16.7.0-alpha），但是我不知道如何设置已分解元素的类型。 这是一个例子： interface IUser { name: string; } ... const [user, setUser] = useState({name: 'Jon'}); 我想强制user变量为type IUser。我唯一成功的试用是分两个阶段进行的：键入，然后初始化： let user: IUser; let setUser: any; [user, setUser] = useState({name: 'Jon'}); 但是我敢肯定有更好的方法。另外，setUser应将其初始化为以aIUser作为输入且什么都不返回的函数。 另外，值得注意的是，const [user, setUser] = useState({name: 'Jon'});不进行任何初始化就可以正常使用，但是我想利用TypeScript强制对init进行类型检查，特别是如果它依赖于某些道具的话。 谢谢你的帮助。

88 reactjs  typescript  react-hooks 

我正在从https://github.com/moroshko/react-autosuggest实现一个示例 重要代码如下： import React, { Component } from 'react'; import suburbs from 'json!../suburbs.json'; function getSuggestions(input, callback) { const suggestions = suburbs .filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb)) .sort((suburbObj1, suburbObj2) => suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) - suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput) ) .slice(0, 7) .map(suburbObj => suburbObj.suburb); // 'suggestions' will be an array of strings, e.g.: // ['Mentone', 'Mill Park', 'Mordialloc'] …

87 javascript  json  reactjs  webpack 

我有一个reactjs使用ES6标准编写的应用程序，并且webpack用于构建它。使用webpack加载js模块babel-loader。具体来说，我使用以下版本的软件包： ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 但是，在构建它之后，IE 10会出现以下错误'Symbol' is undefined。难道不babel应该定义Symbol吗？是否有任何特定的配置，webpack或者babel我需要进行设置才能使其正常工作？我在中使用{stage: 0}配置.babelrc。 任何帮助，将不胜感激，谢谢！

87 reactjs  webpack  babeljs 

我一直在Internet Explorer上测试我的React.js应用程序，发现有些ES6 / 7代码Array.prototype.includes()会破坏它。 我正在使用create-react-app，并且显然它们选择不包含很多polyfill，因为并不是每个人都需要它们，并且它们会减慢构建时间（请参见此处和此处的示例）。该文档（在撰写本文时）建议： 如果您使用任何其他需要运行时支持的ES6 +功能（例如Array.from（）或Symbol），请确保手动包括适当的polyfill，或者要使用的浏览器已经支持它们。 那么... “手动”包括它们的最佳方法是什么？

87 javascript  reactjs  ecmascript-6  create-react-app  ecmascript-7 

我有一些道具，其字符串可能包含＆等字符。它还包含空格。我想用替换所有空格 。 有没有简单的方法可以做到这一点？请记住，我不能只使用以下语法进行渲染： <div dangerouslySetInnerHTML={{__html: myValue}} /> 因为我首先必须用其标记替换任何HTML实体。我不想这样做，它似乎太低了。 有办法吗？

87 html  reactjs 

我必须根据浏览历史实现一些业务逻辑。 我想做的是这样的： reactRouter.onUrlChange(url => { this.history.push(url); }); URL更新后，有什么方法可以接收来自react-router的回调吗？

87 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

用普通的旧JavaScript我有DIV <div class="movie" id="my_movie"> 和以下JavaScript代码 var myMovie = document.getElementById('my_movie'); myMovie.addEventListener('nv-enter', function (event) { console.log('change scope'); }); 现在我在render方法中的这个组件内部有一个React组件，我将返回div。如何为自定义事件添加事件侦听器？（我正在将该库用于电视应用程序-导航） import React, { Component } from 'react'; class MovieItem extends Component { render() { if(this.props.index === 0) { return ( <div aria-nv-el aria-nv-el-current className="menu_item nv-default"> <div className="indicator selected"></div> <div className="category"> <span className="title">{this.props.movieItem.caption.toUpperCase()}</span> </div> …

87 reactjs 

使用create-react-app进行开发时，我的浏览器在出现警告时进入调试器模式： 它打破了react-dev-tools的源代码： // --- Welcome to debugging with React DevTools --- // This debugger statement means that you've enabled the "break on warnings" feature. // Use the browser's Call Stack panel to step out of this override function- // to where the original warning or error was logged. 如何停用此行为？

87 reactjs  javascript-debugger