Questions tagged «reactjs»

我目前正在使用reactjs构建一个单页面应用程序。我读到许多不使用localStorage的原因是由于XSS漏洞。由于React避开了所有用户输入，现在使用localStorage是否安全？

147 reactjs  local-storage  jwt 

我正在使用ReactJS，当用户单击链接时，我要将一些文本复制到剪贴板。 我正在使用Chrome 52，并且不需要支持任何其他浏览器。 我看不到为什么这段代码不会导致数据被复制到剪贴板。（代码段的来源来自Reddit帖子）。 我做错了吗？谁能建议有一种“正确”的方法来使用reactjs实现复制到剪贴板吗？ copyToClipboard = (text) => { console.log('text', text) var textField = document.createElement('textarea') textField.innerText = text document.body.appendChild(textField) textField.select() document.execCommand('copy') textField.remove() }

147 javascript  reactjs  clipboard 

我正在尝试将jQuery组件转换为React.js，而我遇到的困难之一是基于for循环渲染n个元素。 我了解这是不可能的，也不建议这样做，并且在模型中存在数组的地方使用它完全有意义map。很好，但是当您没有数组时该怎么办？取而代之的是，您拥有一个等于要渲染的给定元素数量的数值，那么您应该怎么做？ 这是我的示例，我想根据元素的层次结构级别为元素添加任意数量的span标签。因此，在第3级，我要在text元素之前添加3个span标签。 在javascript中： for (var i = 0; i < level; i++) { $el.append('<span class="indent"></span>'); } $el.append('Some text value'); 我似乎无法得到这个，或者与JSX React.js组件中的工作类似的东西。相反，我必须执行以下操作，首先将临时数组构建为正确的长度，然后循环该数组。 React.js render: function() { var tmp = []; for (var i = 0; i < this.props.level; i++) { tmp.push(i); } var indents = tmp.map(function (i) { return ( …

145 javascript  jquery  reactjs  react-jsx 

React.js中与angular的$ watch函数等效的函数是什么？ 我想听状态变化并调用类似getSearchResults（）的函数。 componentDidMount: function() { this.getSearchResults(); }

143 javascript  reactjs 

看起来它将componentWillReceiveProps在即将发布的版本中完全淘汰，取而代之的是新的生命周期方法getDerivedStateFromProps：static getDerivedStateFromProps（）。 经过检查，看来您现在无法在this.props和之间进行直接比较nextProps，就像您可以在componentWillReceiveProps。有没有办法解决？ 而且，它现在返回一个对象。我是否正确假设返回值本质上是this.setState？ 以下是我在网上找到的示例：状态源自props / state。 之前 class ExampleComponent extends React.Component { state = { derivedData: computeDerivedState(this.props) }; componentWillReceiveProps(nextProps) { if (this.props.someValue !== nextProps.someValue) { this.setState({ derivedData: computeDerivedState(nextProps) }); } } } 后 class ExampleComponent extends React.Component { // Initialize state in constructor, // Or with a property initializer. …

142 javascript  reactjs  lifecycle 

完整代码在这里：https : //gist.github.com/js08/0ec3d70dfda76d7e9fb4 你好 我有一个应用程序，其中根据构建环境显示了针对台式机和移动设备的不同模板。 我可以在需要隐藏移动模板的导航菜单的地方成功开发它。 现在，我能够编写一个测试用例，其中它通过原型获取所有值并正确呈现 但不确定如何在移动设备上编写单元测试用例时，不应呈现导航组件。 我尝试过，但是遇到错误...您能告诉我如何解决它。 提供下面的代码。 测试用例 import {expect} from 'chai'; import React from 'react'; import TestUtils from 'react-addons-test-utils'; import {SportsTopPortion} from '../../../src/components/sports-top-portion/sports-top-portion.jsx'; require('../../test-utils/dom'); describe('"sports-top-portion" Unit Tests', function() { let shallowRenderer = TestUtils.createRenderer(); let sportsContentContainerLayout ='mobile'; let sportsContentContainerProfile = {'exists': 'hasSidebar'}; let sportsContentContainerAuthExchange = {hasValidAccessToken: true}; …

142 reactjs  mocha  redux 

问题 我在React中编写一个应用程序，无法避免出现一个超级常见的陷阱，即setState(...)在after之后调用componentWillUnmount(...)。 我非常仔细地查看了我的代码，并尝试放置一些保护子句，但是问题仍然存在，并且我仍在观察警告。 因此，我有两个问题： 我如何从堆栈跟踪中找出哪个特定的组件和事件处理程序或生命周期挂钩负责违反规则？ 好吧，如何解决问题本身，因为我的代码在编写时就考虑到了这种陷阱，并且已经在试图防止这种情况的发生，但是某些底层组件仍在生成警告。 浏览器控制台 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in TextLayerInternal (created by Context.Consumer) in TextLayer …

142 javascript  reactjs  typescript  lodash  setstate 

好奇解决此问题的正确方法是： var Hello = React.createClass({ getInitialState: function() { return {total: 0, input1:0, input2:0}; }, render: function() { return ( <div>{this.state.total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange} /> <input type="text" value={this.state.input2} onChange={this.handleChange} /> </div> ); }, handleChange: function(e){ this.setState({ ??? : e.target.value}); t = this.state.input1 + this.state.input2; this.setState({total: t}); } }); React.renderComponent(<Hello />, …

141 javascript  reactjs  jsx 

我正在使用webpack来管理reactjs项目。我想通过webpack在javascript中加载图像file-loader。以下是webpack.config.js： const webpack = require('webpack'); const path = require('path'); const NpmInstallPlugin = require('npm-install-webpack-plugin'); const PATHS = { react: path.join(__dirname, 'node_modules/react/dist/react.min.js'), app: path.join(__dirname, 'src'), build: path.join(__dirname, './dist') }; module.exports = { entry: { jsx: './app/index.jsx', }, output: { path: PATHS.build, filename: 'app.bundle.js', }, watch: true, devtool: 'eval-source-map', relativeUrls: true, resolve: { …

141 javascript  reactjs  webpack 

在我的react和typescript应用程序中，我使用：onChange={(e) => data.motto = (e.target as any).value}。 我如何正确定义类的类型，这样我就不必用来绕过类型系统了any？ export interface InputProps extends React.HTMLProps<Input> { ... } export class Input extends React.Component<InputProps, {}> { } 如果我把target: { value: string };我得到： ERROR in [default] /react-onsenui.d.ts:87:18 Interface 'InputProps' incorrectly extends interface 'HTMLProps<Input>'. Types of property 'target' are incompatible. Type '{ value: string; }' …

141 reactjs  typescript  types  typescript-typings 

最近，我查看了Facebook的React框架。它使用了一个我并不真正理解的概念，即“虚拟DOM”。 什么是虚拟DOM？有什么优势？

140 javascript  reactjs 

我正在React React中迈出第一步，并试图理解父母与孩子之间的交流。我正在制作表格，所以我有用于样式字段的组件。而且我还有包含字段并对其进行检查的父组件。例： var LoginField = React.createClass({ render: function() { return ( <MyField icon="user_icon" placeholder="Nickname" /> ); }, check: function () { console.log ("aakmslkanslkc"); } }) var MyField = React.createClass({ render: function() { ... }, handleChange: function(event) { //call parent! } }) 有没有办法做到这一点。我的逻辑在reactjs“ world”上好吗？谢谢你的时间。

140 javascript  reactjs 

我知道React可以异步并批量执行状态更新以优化性能。因此，在调用以后，您将永远无法相信要更新的状态setState。但是你可以信任的反应更新相同的顺序状态setState被称为对 相同的组件？ 不同的组件？ 考虑在以下示例中单击按钮： 1.在以下情况下，是否有可能a为假而b为真： class Container extends React.Component { constructor(props) { super(props); this.state = { a: false, b: false }; } render() { return <Button onClick={this.handleClick}/> } handleClick = () => { this.setState({ a: true }); this.setState({ b: true }); } } 2.在以下情况下，是否有可能a为假而b为真： class SuperContainer extends React.Component { constructor(props) …

139 javascript  reactjs  state  setstate 

是componentDidMount()在React Native中用作异步函数的好习惯还是应该避免呢？ 我需要从AsyncStorage组件安装时获取一些信息，但是我知道使之成为可能的唯一方法是使componentDidMount()函数异步。 async componentDidMount() { let auth = await this.getAuth(); if (auth) this.checkAuth(auth); } 有什么问题吗，还有其他解决方案吗？

139 reactjs  asynchronous  react-native 

我在React中使用Typescript。我在理解如何使用refs方面遇到麻烦，以便相对于refs引用的react节点获得静态类型和智能感知。我的代码如下。 import * as React from 'react'; interface AppState { count: number; } interface AppProps { steps: number; } interface AppRefs { stepInput: HTMLInputElement; } export default class TestApp extends React.Component<AppProps, AppState> { constructor(props: AppProps) { super(props); this.state = { count: 0 }; } incrementCounter() { this.setState({count: this.state.count + 1}); …

139 reactjs  typescript