Questions tagged «reactjs»

考虑下面的钩子示例 import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } 基本上，我们使用this.forceUpdate（）方法强制组件在React类组件中立即重新呈现，如以下示例所示 class Test extends Component{ constructor(props){ super(props); this.state = { count:0, count2: 100 } this.setCount = …

116 javascript  reactjs  react-native  react-hooks 

我有一些副作用要应用，并且想知道如何组织它们： 一次性使用 或多次使用 在性能和体系结构方面有什么更好的选择？

116 reactjs  react-hooks 

我具有以下组件（radioOther.jsx）： 'use strict'; //module.exports = <-- omitted in update class RadioOther extends React.Component { // omitted in update // getInitialState() { // propTypes: { // name: React.PropTypes.string.isRequired // } // return { // otherChecked: false // } // } componentDidUpdate(prevProps, prevState) { var otherRadBtn = this.refs.otherRadBtn.getDOMNode(); if (prevState.otherChecked !== otherRadBtn.checked) …

115 reactjs  ecmascript-6 

我知道我不应该改变输入，而应该克隆对象来改变它。我遵循在redux入门项目上使用的约定，该约定使用： ADD_ITEM: (state, action) => ({ ...state, items: [...state.items, action.payload.value], lastUpdated: action.payload.date }) 用于添加项目-我使用了点差将项目追加到数组中。 用于删除我使用的： DELETE_ITEM: (state, action) => ({ ...state, items: [...state.items.splice(0, action.payload), ...state.items.splice(1)], lastUpdated: Date.now() }) 但这改变了输入状态对象-即使我要返回一个新对象，也禁止这样做吗？

115 javascript  reactjs  redux 

在xcode上构建本机iOS应用程序时遇到此错误。 在npm install和rpm链接react-native-fs库之后，开始出现此错误。但是在网上搜索解决方案后，我注意到许多人在安装其他React Native库时遇到了相同的错误。 许多人建议的一种可能的解决方案是，在“构建设置”->“标题搜索路径”下添加以下内容。 $(SRCROOT)/../node_modules/react-native/React -（递归） 但是这种解决方案没有运气，仍然会出现相同的错误

115 ios  xcode  reactjs  native  react-native-ios 

是否可以获取当前滚动位置或<ScrollView>React Native中组件的当前页面？ 所以像这样： <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView>

115 ios  reactjs  react-native 

我希望我的ReactJS应用在离开特定页面时通知用户。特别是一条弹出消息，提醒他/她进行以下操作： “更改已保存，但尚未发布。现在执行吗？” 我应该在react-router全局范围内触发此操作，还是可以在react页面/组件内完成此操作？ 我还没有发现任何关于后者的信息，我宁愿避免使用第一个。除非当然是其规范，否则这使我想知道如何执行这样的事情而不必将代码添加到用户可以访问的所有其他可能的页面中。 欢迎有任何见解，谢谢！

115 reactjs  react-router 

这是一个基本组成部分。无论是<ul>和<li>拥有的onClick功能。我只希望<li>触发onClick 而不触发<ul>。我该如何实现？ 我玩过e.preventDefault（），e.​​stopPropagation（）都无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => …

115 reactjs  onclick  event-propagation 

我一直在使用React 16.7-alpha中的新钩子系统，并在我处理的状态是对象或数组时陷入useEffect的无限循环中。 首先，我使用useState并使用一个空对象启动它，如下所示： const [obj, setObj] = useState({}); 然后，在useEffect中，我再次使用setObj将其设置为空对象。作为第二个参数，我传递了[obj]，希望如果对象的内容没有更改，它也不会更新。但是它一直在更新。我猜是因为不管内容如何，​​这些总是不同的对象，这使React认为它不断变化？ useEffect(() => { setIngredients({}); }, [ingredients]); 数组也是如此，但是作为原语，它不会像预期的那样卡在循环中。 使用这些新的挂钩，在检查天气内容是否已更改时，应该如何处理对象和数组？

115 reactjs  react-hooks 

因此，通常我会包括大多数需要简单样式的SVG图标，我这样做： <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 现在，我一直在玩ReactJS作为它的后期评估在我的新的前端开发堆栈可能的成分，但是我注意到，在其支持的标记/属性列表，无论是use或xlink:href支持。 是否可以使用svg精灵并以这种方式在ReactJS中加载它们？

114 svg  sprite  reactjs 

我们的应用程序使用无限滚动来浏览大量异构项目列表。有一些皱纹： 对于我们的用户来说，通常有10,000个项目的列表，并且需要滚动3k +。 这些都是丰富的项目，因此在浏览器性能变得无法接受之前，我们只能在DOM中拥有几百个。 这些物品的高度各不相同。 这些项目可能包含图像，我们允许用户跳转到特定日期。这很棘手，因为用户可以跳到列表中需要在视口上方加载图像的位置，这会在加载时将内容下推。无法处理意味着用户可能会跳到某个日期，但是随后又被转移到了更早的日期。 已知的不完整解决方案： （react-infinite-scroll）-这只是一个简单的“当我们触底时加载更多”组件。它不会剔除任何DOM，因此它将死于数千个项目上。 （带有React的滚动位置）-显示在顶部插入或底部插入（而不是同时插入）时如何存储和恢复滚动位置。 我不是在寻找完整解决方案的代码（尽管那会很棒）。相反，我正在寻找“ React Way”来为这种情况建模。滚动位置是否处于状态？我应该跟踪什么状态以保留我在列表中的位置？我需要保持什么状态，以便在滚动到渲染内容的底部或顶部附近时触发新的渲染？

114 javascript  html  infinite-scroll  reactjs 

React.js的最大优势之一应该是服务器端渲染。问题在于密钥功能React.renderComponentToString()是同步的，这使得在服务器上呈现组件层次结构时无法加载任何异步数据。 假设我有一个通用的注释组件，可以将其放置在页面上的任意位置。它只有一个属性，某种标识符（例如，放置评论的文章ID），其他所有内容都由组件本身处理（加载，添加，管理评论）。 我真的很喜欢 Flux架构，因为它使许多事情变得容易得多，并且它的存储非常适合在服务器和客户端之间共享状态。初始化包含评论的商店后，我可以对其进行序列化并将其从服务器发送到易于还原的客户端。 问题是填充我的商店的最佳方法是什么。在过去的几天里，我一直在搜寻很多东西，并且遇到过几种策略，考虑到React的这一功能正在“推广”多少，这些策略似乎都不是一件好事。 我认为，最简单的方法是在实际渲染开始之前填充所有商店。这意味着组件层次结构之外的某个地方（例如，钩到了我的路由器）。这种方法的问题在于，我几乎必须两次定义页面结构。考虑一个更复杂的页面，例如具有许多不同组件的博客页面（实际博客文章，评论，相关文章，最新文章，Twitter流...）。我将不得不使用React组件设计页面结构，然后我必须在其他地方定义填充此当前页面的每个所需商店的过程。这对我来说似乎不是一个很好的解决方案。不幸的是，大多数同构教程都是以此方式设计的（例如， flow-tutorial）。 反应-异步。这种方法是完美的。它使我可以简单地在每个组件的特殊功能中定义如何初始化状态（无论是同步还是异步），这些功能在将层次结构呈现给HTML时被调用。它的工作方式是直到状态完全初始化后才呈现组件。问题是它需要纤维据我了解，这是一个Node.js扩展，可更改标准JavaScript行为。尽管我非常喜欢结果，但在我看来，我们没有找到解决方案，而是更改了游戏规则。而且我认为我们不应被迫使用React.js的这一核心功能。我也不确定该解决方案的一般支持。是否可以在标准Node.js虚拟主机上使用Fiber？ 我自己想了一下。我还没有真正考虑过实现细节，但是总体思路是，我将以类似于React-async的方式扩展组件，然后在根组件上重复调用React.renderComponentToString（）。在每次通过期间，我将收集扩展的回调，然后在和处调用它们，以填充商店。我将重复此步骤，直到将填充当前组件层次结构所需的所有商店。有很多事情需要解决，我尤其不确定性能。 我错过了什么？还有其他方法/解决方案吗？现在，我正在考虑采用react-async / fibers方式，但是我不确定，正如第二点所述。 GitHub上的相关讨论。显然，没有官方的方法甚至解决方案。可能真正的问题是应如何使用React组件。像简单的视图层（几乎是我的建议之一）还是真正的独立组件？

114 node.js  reactjs  flux  reactjs-flux 

我一直在玩React，并具有以下仅显示Date.now()在屏幕上的时间组件： import React, { Component } from 'react'; class TimeComponent extends Component { constructor(props){ super(props); this.state = { time: Date.now() }; } render(){ return( <div> { this.state.time } </div> ); } componentDidMount() { console.log("TimeComponent Mounted...") } } export default TimeComponent; 从React的角度来看，使该组件每秒更新以重新绘制时间的最佳方法是什么？

114 javascript  reactjs 

我知道这个问题已经被问过几次了，但是在大多数情况下，解决方法是在父级中解决这个问题，因为责任流只是在下降。但是，有时您需要使用一种方法杀死组件。我知道我无法修改其道具，并且如果我开始添加布尔值作为状态，那么对于一个简单的组件来说，它将会变得非常混乱。这是我要实现的目标：一个小的错误框组件，带有一个“ x”将其关闭。通过其道具接收到错误将显示该错误，但是我想一种从其自己的代码中关闭该错误的方法。 class ErrorBoxComponent extends React.Component { dismiss() { // What should I put here? } render() { if (!this.props.error) { return null; } return ( <div data-alert className="alert-box error-box"> {this.props.error} <a href="#" className="close" onClick={this.dismiss.bind(this)}>×</a> </div> ); } } export default ErrorBoxComponent; 我会在父组件中这样使用它： <ErrorBox error={this.state.error}/> 在本节中 我应该在这里放什么？，我已经尝试过： ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).parentNode); 这在控制台中引发了一个不错的错误： 警告：unmountComponentAtNode（）：您尝试卸载的节点是由React渲染的，不是顶级容器。而是让父组件更新其状态并重新渲染，以删除此组件。 …

114 reactjs  unmount 

在带有钩子的React中，更新状态的正确方法是嵌套对象是什么？ export Example = () => { const [exampleState, setExampleState] = useState( {masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b" fieldTwoTwo: "c" } } }) 一个人怎么会使用setExampleState到的更新exampleState来a（附加一个字段）？ const a = { masterField: { fieldOne: "a", fieldTwo: { fieldTwoOne: "b", fieldTwoTwo: "c" } }, masterField2: { fieldOne: "c", fieldTwo: { fieldTwoOne: "d", …

114 javascript  reactjs  react-hooks