可以从状态对象数组动态创建React.createRef()吗？
可以从状态对象数组动态创建React.createRef()。
在React中，可以通过状态来动态渲染组件。React.createRef()是React提供的用于创建Ref对象的方法，可以在组件中通过ref属性来引用组件或DOM元素。
对于状态对象数组，你可以遍历数组，并为每个对象创建一个Ref对象。可以使用map方法来遍历状态对象数组，并为每个对象创建一个Ref对象。例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' }
]
};
this.refsArray = this.state.data.map(() => React.createRef());
}
render() {
return (
<div>
{this.state.data.map((item, index) => (
<div key={item.id} ref={this.refsArray[index]}>
{item.name}
</div>
))}
</div>
);
}
}在上面的例子中，我们使用this.refsArray来存储Ref对象的数组。在render方法中，我们使用map方法来遍历this.state.data数组，并为每个元素创建一个包含Ref的div元素。
这样，你就可以通过this.refsArray[index].current来访问对应元素的Ref对象。例如，可以使用this.refsArray[0].current来访问第一个元素的Ref对象。
这种方法在需要动态创建组件或访问动态生成的DOM元素时非常有用。
相关·内容
1回答
我需要对HTML-元素的访问，以便稍后与它们交互(比如在按钮单击上添加动画)。为此，我想使用useMemo-hook。我的设置如下：
我正在通过useEffect从防火墙获取数据
useEffect(() => {
const unsubscribe = database.collection("users").onSnapshot((snapshot) => {
snapshot.forEach((doc) => {
...
}, []);
并将其存储在useState-hook:中。
const [users, setUsers] =
浏览 0提问于2021-05-11得票数 0
回答已采纳
1回答
我创建了一个react组件，它不会显示输入字段的标签。由于label文本的长度是可变的，所以我试图动态地更改字体大小，以便文本适合固定大小的容器。
然而，不知何故，当函数被调用时，我的字体大小没有被更新，我也不知道为什么。
这是我的代码：
import React from "react";
class NewDrive extends React.Component {
constructor(props) {
super(props);
this.myOutputRef = React.createRef();
this.myOutputCon
浏览 0提问于2021-11-24得票数 0
回答已采纳
我对使用useEffect和useRef有点陌生。我想要做的是创建一个内容管理系统，为单个页面滚动应用程序的数据库中的n个页面元素启用scrollIntoView。
我无法让它起作用，所以我希望能得到一些帮助。
我发布了一个简单的测试，其中我有一个功能反应组件，其中第2节工作(点击按钮滚动到页面元素。
但我的目标是从数据库中获取'n‘节，并创建'n’个参考数，向下滚动到'n‘个节数。
我试过useRef，useEffect等，但是我很困惑。我的代码片段显示了一个工作示例，其中包含第2节的手动引用声明，但是第1节试图使用一个引用集合，这是不起作用的。
下面是一个代码示例：
浏览 0提问于2019-09-02得票数 1
回答已采纳
我的问题和this one几乎一样。 在这种情况下，person有一个以硬编码方式创建的州地图： const App = props => {
const [state, changeState] = useState({
name: "",
eventTitle: "",
details: "",
list: "",
toggleIndex: "",
editName: "",
editEventTitle: ""
浏览 21提问于2020-03-17得票数 3
回答已采纳
当我最初学习React时，总是被告知将、everything、放在this.state中。不管是一些经常更新的数据，还是一些根本不更新的数据。
但是，在实现React时，即使状态不更新，我也不确定应该使用useState多久一次。
让我举一个例子来说明我的形式逻辑：
const FormAuth = props => {
//Frequently updates
const [validInput, setValidInput] = useState({
isCompletedForm: Boolean,
firstName: Boolea
浏览 0提问于2019-05-28得票数 1
回答已采纳
1回答
我正在将文件从类组件转换为功能组件。
let embellishmentRefs = createRef<AddArtEmbellishmentEntry>();
useEffect(() => {
const embellishments = Object.assign([], props.orderLinesDetailed[0].embellishments);
embellishments.forEach((embellishment, i) => {
embellishment.Id = i;
浏览 1提问于2022-03-15得票数 1
回答已采纳
该问题与具有相同标题的问题不同。 我正在使用react钩子来创建我自己的动态添加/删除，使用这个example来创建我的动态添加/删除。 正如标题所示，单击“创建项目”按钮时会出现错误消息。 这是我的codesandbox link，它显示了我的代码和错误。任何帮助都是非常感谢的。
浏览 65提问于2021-09-17得票数 0
回答已采纳
1回答
例如，有没有办法使用javascript循环动态创建状态对象。
结果应如下所示：
states: [
State{
name: "name1"
when: somevar === onevar
//stuff
},
State{
name: "name2"
when: somevar === anothervar
//stuff
}
]
但是我想从一个任意的javascript数组开始，比如
var myStatesObj = [{
浏览 1提问于2014-04-07得票数 3
在我的应用程序中，我有一个输入字段和一个ref，用于存储用户输入的值。我还在一个div中提供了一系列的React链接，作为用户搜索的推荐关键字。
是否有一种方法可以动态地修改具有与用户输入相同文本的React元素？
用户输入的“鞋”和有一个<Link to="/display?shoe"> Shoe </Link>，然后我可以得到这个元素，并添加一些内联css到它。
浏览 12提问于2022-08-02得票数 0
1回答
我在试着理解Ref在React中的用法。我在Ant设计文档中看到了一个示例。
有一行代码我无法理解它是如何工作的。
saveInputRef = input => (this.input = input);
以及使用情况如下：
<Input ref={this.saveInputRef} ...
但是在React文档中，据说您使用React.createRef()方法创建了一个ref。
这是另一种使用它的方式吗？为什么没有React.createRef()方法？
浏览 5提问于2021-09-30得票数 3
我一直把头撞在墙上，交叉引用我从别人那里读到的代码和被问到的问题。我正处在这样一个时刻，我知道我只是没有朝正确的方向看，但是我不知道该在哪里转弯。
我正在编写的应用程序最初是我在2019年编写的，当我从一个编码入门营学习组件时，我不知道React h Hooks。泰瑞:我生锈了。
问题:我正在尝试使用AXIOS在我的MongoDB中使用PUT调用，我学到的方法是使用参考文献。现在我已经不再推荐引用我学习的方式了，我只想让它发挥作用，这样我就可以转到另一个项目，开始使用Hooks了。
当我使用我创建的按钮来保存更改时，我会在浏览器控制台中得到一个错误，但是它刷新得太快，无法捕捉到确切的错误。我第
浏览 1提问于2021-08-07得票数 1
回答已采纳
2回答
c++中的动态对象
、、、
我从c#来到c++，我不明白什么是动态对象。假设你有a类，创建像A *a = new A()这样的对象是正常的，但是什么是对象a呢？它和数组是一样的吗？我们可以像a或a1那样写吗？但是，如果我们重载operator []并希望创建动态对象，而我们在那里有数据并希望正常获取数据，会发生什么呢？
浏览 1提问于2017-06-21得票数 5
回答已采纳
1回答
日期提示React.js组件
、、、、
我已经创建了一个日期组件(在底部工作GIF，请忽略样式)。
代码的工作没有问题，而是我编写的代码看起来很混乱，而且对任何其他人来说都很难理解。
这就是我要做的:对于屏幕中的date组件，我创建了以下引用和状态
class OnBoarding extends PureComponent {
constructor(props) {
super(props)
this.d1 = React.createRef()
this.d2 = React.createRef()
this.d3 = React.createRef()
浏览 0提问于2019-06-21得票数 2
我希望将事件处理程序状态更改逻辑与React Component A解耦，并将其放入class B中。class B (所以不是React组件)应该能够改变component A的状态。
因此，我不想将函数引用setState(B.handle)传递给setState，但可以从class B进行setState。
该怎么做呢？
将this传递给B类的构造函数是可行的吗？
编辑:对不起，忘了提一下，我不能使用第三方库来保持它的自由依赖。
浏览 7提问于2018-08-09得票数 2
1回答
我知道如何创建panResponder，但不知道如何创建多个实例。就像。我有一个独立移动的元素数组，我必须将每个响应分别附加到元素上，以从元素中获取布局值。任何帮助都会被困很久。
pan = new Animated.ValueXY();
panResponder = PanResponder.create({
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: (evt, gestureState) => {
this.pan.setO
浏览 2提问于2021-06-15得票数 1
回答已采纳
1回答
我有一个需求，对于表格的每一行(行是动态填充的)，我有一个“详细信息”按钮，它应该在单击时弹出一个模式。如何维护该表中每一行的状态，以便React知道我正在单击哪一行，从而将相应的道具传递给模态组件？ 我尝试的是创建一个包含所有false值的数组，其长度与我的数据长度相同，计划是在单击按钮时更新特定行的布尔值。但是，我无法执行相同的操作。 这是我到目前为止尝试过的： let initTableState = new Array(data.length).fill(false)
const [tableState, setTableState] = useState(initTableStat
浏览 37提问于2021-10-24得票数 1
回答已采纳
这是一个多余的问题。是否有任何动态数组或列表在进度10.2B？
示例：
我创建了一个名为"InventoryTransaction“的基类。我从进步中读取了一个MSSQL表，我希望为找到的每个记录创建一个InventoryTransaction类的实例，然后将它添加到一个"list/array“中，以便以后处理它们。
是否有类似MyArray: add ( MyItem )的东西会自动增加数组大小+1，然后将MyItem实例添加到数组中？
我发现了动态设置数组大小的函数范围，但是在读取MSSQL表中的所有事务之前，我不知道计数。或者，在读取所有事务以检索计数，然后扩展数组之前，
浏览 3提问于2014-01-31得票数 2
回答已采纳
我有一个父组件和一个子组件，我想访问子组件中的元素的ref，在父组件中。我能把它和道具一起传递吗？
// Child Component (Dumb):
export default props =>
<input type='number' ref='element' />
// Parent Component (Smart):
class Parent extends Component {
constructor(props) {
super(props);
}
componentDi
浏览 5提问于2017-03-23得票数 23
回答已采纳
在这个组件中，我不确定是否应该使用createRef和useRef从输入中获取信息。你能帮我弄清楚该如何选择其中之一吗？提前感谢 import React from 'react'
const AddBook = (props) => {
const handleNewBook = props.handle
let titleInput = React.createRef();
let authorInput = React.createRef();
return (
<div className="add
浏览 22提问于2021-02-04得票数 1
回答已采纳
useEffect不会呈现来自axios get请求的数据。但是，在控制台中，它将初始结果记录为一个空数组。const childRefs = useMemo(() => new Array(results.length).fill(0).map((i) => React.createRef()),[]);这一行要求返回axios请求中的数组的结果状态，否则我会得到错误TypeError: Cannot read property 'current' of undefined。如果我将结果状态作为参数传递到useEffect中，那么useEffect会继续调用而不
浏览 5提问于2021-07-01得票数 0
回答已采纳
简单的问题:假设使用React.Component我有这样的代码：
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.textInput = React.createRef();
}
}
使用createReactClass方法，这相当于什么呢？
编辑：--我读到过，我可以使用getInitialState作为初始状态，但是它是创建参考文献的好地方吗？
浏览 3提问于2021-05-13得票数 1
回答已采纳
2回答
对于我的最新任务，我需要创建一个包含股票的哈希表，这些股票封装在一个类中。为了避免冲突，我需要使用线性探测。然而，我遇到的问题是，我不能测试数组的一个元素(即哈希表)是否为空。
以下是从几个文件聚合而来的一些代码，但这只是为了让您对所发生的事情有一个了解。
class Stock{
friend class HashMap
}
class HashMap{
bool get() //this function is used for putting new stocks into the table
private:
struct Slot {
Stock slotSto
浏览 1提问于2014-11-17得票数 0
2回答
我做了这个复选框，它应该是一个“三态”复选框，它使用不确定的状态，不仅是“视觉价值”，也是“真实”的-value。如果我只使用标准复选框就可以了，但是如果我使用引导自定义复选框，它就不再起作用了，因为ReactDOM.findDOMNode(this).indeterminate无法访问该复选框。因此，ReactDOM.findDOMNode(this).indeterminate = true;不会将indeterminate设置为true。
这是我的组件：
import React from "react";
import ReactDOM from 'react-
浏览 21提问于2018-08-14得票数 0
1回答
我知道如何从父类调用子方法。但是现在，当我想从另一个孩子调用一个子方法时，我遇到了一个问题。
如何从testMethod类调用在UserAuthenticationRequests类中声明的UserAuthenticationUI ()？从App调用testMethod()是没有问题的。
(例如，我不需要从App类调用它)
父类
import React from 'react';
import UserAuthenticationUI from './UserAuthentication/UserAuthenticationUI';
import UserAu
浏览 1提问于2018-07-20得票数 0
如何从componentDidMount中导出"x“变量，以便在render部分使用它？我正在尝试检查我的div的x位置。 import React from 'react';
class Icon extends React.Component {
constructor(props) {
super(props);
this.selector = React.createRef();
}
componentDidMount = () => {
var rect = this.selector.current.getBo
浏览 29提问于2020-04-29得票数 1
回答已采纳
我有一个组件，它有N数量的过滤器，对于每一个过滤器，都有M值。我试图动态地显示这两种情况，但它似乎不起作用。
我能够测试这些值，看看是否使用了正确的语法来检索数据，并且代码能够从对象中获取数据。但是，在使用动态过滤器时，似乎没有任何东西通过下拉<button>标记运行。
您可以查看作为我的应用程序的副本创建的StackBlitz项目。我已经以从getFilters调用时返回的形式将filters对象打印到控制台。正如您所看到的，它正在返回数据，但是当用户单击下拉列表时看不到任何filterValues。
我希望它能显示每个filterValues，但是当我单击下拉按钮时不会发生任何
浏览 1提问于2019-08-07得票数 2
回答已采纳
我正在尝试创建一个文本编辑器，比如Draft.js，这就需要使用contentEditable。无论如何，我使用MutationObserver来检测更改，并且希望能够在状态中反映DOM的更改。
当组件呈现为字符串时，findDOMNode返回包含该值的文本DOM节点。
我希望将突变目标与呈现的dom进行比较，并在app状态中反映这些变化。如果我使用findDOMNode，它很可能会工作，不过它是不推荐的。还有别的选择吗？或者，是否有一种使用裁判来实现这一目标的方法？
例如，我有一个PElement类：
class PElement extends React.Component {
浏览 3提问于2020-05-06得票数 0
2回答
在我的代码中，我有多个组件，每个组件都有一个不同的id。我要给他们每人一个推荐信。但是，我收到一个错误，它说：
TypeError: _this3.pinterestRefs.push
这是我的代码：
import React, { Component } from 'react'
import InterestBox from './InterestBox'
import Axios from 'axios'
export class InterestList extends Component {
constructor(prop
浏览 2提问于2019-12-29得票数 0
回答已采纳
2回答
我使用的是react-admin框架。如果值多次出现在state中，我会尝试动态地从state (id)中删除值。我的用例是创建复选框，所以如果一个复选框被单击两次，它将取消选中。
到目前为止，我有以下代码：
private addIdsToObj = (id: any) => {
const Ids = [...this.state.selectedIds, id];
this.setState({ selectedIds: Ids });
if (Object.values(this.state.selectedIds).includes(id) === true)
浏览 15提问于2020-02-07得票数 0
回答已采纳
我对从react documentation...All访问引用的两种语法感到困惑，我想知道的是什么时候在react中使用inputRef.current而不是this.inputRef来访问引用
浏览 1提问于2018-09-01得票数 4
回答已采纳
所以我有一个动态变量，可以是用户决定的从5到< 99的任何整数。 var topLevelMenusTotalNum 每个顶级菜单都有5个我想存储的固定属性，它们大多是整数和一些长数字。然后回想一下，以便在我的代码中使用。 对于我来说，在一个大小可以动态变化的存储系统中存储这些值的最好方法是什么？ 我猜我应该将每个顶级菜单存储为一个对象，具有5个属性，即 menu1.property1 = 500
menu1.property2 = 23
...
menu1.property5 = 24.3445345644 但是，如何根据用户创建的数量动态创建menu1、menu2、menu3等对象
浏览 12提问于2016-11-30得票数 0
回答已采纳
如何将数据传递给要在ReactJS中编辑的表单？
我有3个组件，表，表单和父组件。
return (
<Table />
<Form />
);
表呈现一个项列表，每一行都有一个编辑按钮。
因此，当单击Edit按钮时，它将使用项目的id调用一个编辑函数(从使用支持的父程序传递)。
this.props.edit('iAmTheIdOfTheItem');
编辑函数将在父组件状态下设置id。
edit = (id) => {
this.setState({ id })
}
选择的项将传递给窗体组件。
<Form item
浏览 0提问于2019-04-23得票数 1
回答已采纳
18回答
在示例中进行工作。下面的第一个AddTodo示例使用状态来存储TextInput值并运行良好。
class AddTodo extends React.Component{
constructor(props){
super(props);
this.state = { todoText: "" };
}
update(e){
if(this.state.todoText.trim()) this.props.dispatch(addTodo(this.state.todoText));
浏览 12提问于2017-07-22得票数 47
回答已采纳
1回答
我正试着为所有屏幕做一张关键地图。为此，我需要从react-navigation的导航容器中提取所有密钥。
例如,
const result = {
MainScreen: 'Main-p-u9s_rA3z5HCT-KHyDua',
IndexScreen: 'Index-97mYyg2-P5Kb_wGY4E1ke',
<RouteName>: <RouteKey>
...
}
有什么解决办法吗？
浏览 2提问于2021-04-13得票数 2
回答已采纳
假设我有一个可重用的容器。它是一个具有多页的向导。
向导状态由redux/action驱动。当一个动作被触发时，我使用还原器更新我的状态。
如果我想要复制多个向导，并具有自己的状态呢？
我认为必须有一种方法让某个动态还原器(可以创建/销毁)处理操作，然后让每个单独的向导从存储/状态的这些动态片段中驱动。
推荐这样做吗？外面的图书馆能让这更容易吗？
浏览 3提问于2016-03-30得票数 11
回答已采纳
如果我们不能在功能组件中创建引用，那么useRef是如何创建引用的呢？以这个代码为例-
import "./styles.css";
import {useRef} from "react";
const App = () => {
const inputElement = useRef();
const focusInput = () => {
inputElement.current.focus();
};
return (
<>
<input type="text
浏览 2提问于2022-06-13得票数 -1
回答已采纳
有人能告诉我如何在动态反应中创建裁判吗？
例如，我有
<canvas style={{display:'none'}} ref={(el) => this.image = el} > </canvas>
我想要创造更多的动态。
如下所示：
<canvas style={{display:'none'}} ref={(el) => this.image1 = el} > </canvas>
<canvas style={{display:'none'}} ref={(el) =>
浏览 2提问于2018-05-30得票数 2
回答已采纳
我在一个表中有几个输入字段(每行都有一个输入字段)，每个字段都是这样动态命名的： <table>
<tr>
<td>
<input
key={name}
type="text"
value={label}
name={name}
/>
<span>Edit</span>
</td>
</tr>
</table> 注意，我映射到一些对象上，以呈现包含一个输入字段的每个&l
浏览 30提问于2019-08-27得票数 2
回答已采纳
在使用ArrayStore动态填充组合框时，我遇到了问题。
在Controller中:我有一个StatusArray：“活动”、“非活动”、“关闭”，我创建了一个如下所示的商店
var test = Ext.create('Ext.data.ArrayStore', {
fields: [
{ name: "Status" }
],
data: StatusArray
});
然后我用这个商店填充了组合框
Ext.ComponentQuery.
浏览 1提问于2014-09-16得票数 0
回答已采纳
1回答
我是Vue的新手，我试图动态地创建一个Divs列表，每个列表中都有X个子Div。此外，儿童将被添加，编辑或删除在不同的点。
divs的数据最初通过一个名为pageObjects的结构化数组到达：
var pageObjects = [
{
id: "1",
title: "Page 1",
subpages: [
{
id: "2_1",
title: "Page 2 Subpage 1"
},
{
id: "2
浏览 2提问于2020-02-07得票数 0
回答已采纳
1回答
例如，如果我想使用ID3D11RasterizerState，并将CullMode设置为D3D11_CULL_BACK，然后在运行时将其更改为D3D11_CULL_FRONT，那么最好的方法是什么？我为每个选项创建了一个状态，并在运行时设置了正确的状态，但是这非常麻烦，因为我需要为每个组合设置许多不同的着色器状态。在运行时从着色器检索描述(例如ID3D11DepthStencilState::GetDesc())并动态更改它是一个很好的选择吗？
浏览 2提问于2021-08-23得票数 1
回答已采纳
我有包含两个子组件的父组件。 <Parent>
<Child1></Child1>
<Child2></Child2>
</Parent> 在Child2组件中，我有一个Ul (无序列表)，我在其中指定了ref="mylist"。 <ul ref="mylist" className="list"><li>Test1</li><li>Test2</li><li>Test3</li></
浏览 22提问于2018-12-18得票数 0
我有下面的state
const[images,setImages] = useState([
{src: 'stringSRC1', selected: false},
{src: 'stringSRC2', selected: false},
{src: 'stringSRC3', selected: false}
]);
我正在用以下代码更新它(切换选定的状态)：
function handleImageClick(index) {
props.setImages((prevState)=>{
const au
浏览 0提问于2019-05-24得票数 10
回答已采纳
1回答
因此，我找到了两种动态更改react组件的className的方法。但是哪一个是最好和最有效率的呢？
使用参考文献：
class Header extends React.Component{
dropdownRef = React.createRef()
handleDropdown = () =>{
this.dropDownRef.current.classList.toggle('open')
};
render(){
return(
<header>
浏览 12提问于2022-05-11得票数 1
我从后端动态加载数据。完成后，它会更新state对象： componentDidMount = ()=>{
let response = await axios.get('/api/entity/' + id);
if (response.data && response.data.result){
this.setState({item: response.data.entity});
} else {
this.setState({sta
浏览 24提问于2020-11-08得票数 1
1回答
我正在用Typescript/React编写一个CPU模拟器。我有一个CodeExecutionView，CPU和Terminal。 现在，当CPU触发适当的指令时，我想要向Terminal写入一些数据。我要写入的数据驻留在CPUstate中。我用来向终端写入数据的函数在TerminalView组件中。如何传递该函数以供CPU类使用？ 下面是我的代码结构： ___________
| |
| MAIN VIEW |
|(comp
浏览 32提问于2020-10-04得票数 0
回答已采纳
1回答
我有一个动态创建的React元素列表，它是通过在render函数中运行一个方法来创建的：
surveyFileErrors.map((errorData, i) => {
return arr.push(<FileErrorCard ref={} key={errorData.id} errorData={errorData} />);
}
我正在尝试为每个元素创建一个Ref，这样我就可以将焦点切换到具有向上和向下箭头的元素。这是我的构造函数：
constructor(props) {
super(props);
this.state = {
f
浏览 1提问于2018-04-24得票数 0
我有一个产品数据库，其中有一个名为attributes的列，它将属性/值对存储为JSON。例如，我可以有一个产品，那个产品会有属性，但是每个产品的属性都不一样。因此，一种产品看起来可能是：
#product1
attributes {
color: "green",
size: "small"
}
而另一个看起来可能是：
#product2
attributes {
width: "12inches",
height: "11inches
}
我正在为CRUD产品设置一个表单，包括这些动态属性。到目前为止它看起来是这样的：
浏览 6提问于2021-07-24得票数 1
回答已采纳
我正在学习Java，令人惊讶的是，我发现Java数组不是动态的--尽管它使用的语言有动态数组。
所以我自己想出了一些想法来模仿java中的动态数组。
我的一个想法是将原始数组引用复制到临时数组，然后将原始数组转换为null，将其索引重新设置为更大的值，最后从临时数组中重新复制这些值。
示例：
if(numberOfEntries == array.length){
Type[] temp = new Type[numberOfEntries];
for(int x=0; x < numberOfEntries; x++){
temp
浏览 0提问于2015-06-03得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
