Можно ли преобразовать строку в имя ссылочной переменной в реакции?
У меня есть ссылочная переменная:
const weightInputRef = useRef();
const weightInputRef = useRef();
У меня есть некоторые данные:
const inputs = [{
ref: heightInputRef,
type:'number',
placeholder: 'Height',
name: 'height'
},
{
ref: weightInputRef,
type:'number',
placeholder: 'Weight',
name: 'weight'
}]
Я использую его для установки соединения между следующими элементами HTML:
{inputs.map((item, index) => <Input
name = {inputs[index].name}
placeholder = {inputs[index].placeholder}
type = {inputs[index].type}
inputRef = {inputs[index].ref}
/>
)}
Можно ли вместо этого отправить имя переменной напрямую? Нравиться:
ref=item.name+"InputRef"
Я думаю, что это может сэкономить много кода. Есть ли способ добиться этого?
Вот мой компонент ввода:
export default function Input(props) {
return (
<input
className = {classes.input}
placeholder = {props.placeholder}
type = {props.type}
ref = {props.inputRef}
name = {props.name}
/>
)
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
РЕДАКТИРОВАТЬ Как указал Ник Парсонс, вы можете создать объект поиска для хранения ссылочных переменных и доступа к ним, используя их имена в качестве ключей. Вот окончательный компонент кода.
import React, { useRef } from 'react';
const heightInputRef = useRef();
const weightInputRef = useRef();
const inputRefs = {
weight: weightInputRefs,
height: heightInputRefs
}
const inputs = [
{ type: 'number',
placeholder: 'Height',
name: 'height'
},
{ type: 'number',
placeholder: 'Weight',
name: 'weight'
}
];
export default function Input(props) {
return (
<input
className = {classes.input}
placeholder = {props.placeholder}
type = {props.type}
ref = {props.inputRef}
name = {props.name}
/>
);
}
function YourComponent() {
return (
<div>
{inputs.map((item, index) => (
<Input
key = {index}
name = {item.name}
placeholder = {item.placeholder}
type = {item.type}
inputRef = {inputRefs[item.name]} // Access the reference variable from the lookup object
/>
))}
</div>
);
}
@Millennial Как правило, вам лучше избегать использования eval, когда есть альтернативы (он может выполнять любой JS, поэтому вам нужно быть уверенным, что вы доверяете данным в item.name, например, если они исходят от пользовательского ввода, вы не можете доверяй этому). В этом случае есть лучший вариант, который заключается в создании объекта с вашими ссылками в них, они используют скобки для ссылки на них: stackoverflow.com/questions/5187530/…
Это выглядит совсем не уместно. Избегайте специального использования eval при выполнении динамического значения, такого как item.name.
Спасибо @НикПарсонс. Я обновил код соответственно.
Как предложил Ник Парсонс:
Создание объекта с рефами:
const refsObject = {
weight: weightInputRefs,
height: heightInputRefs
}
измененный код может быть:
{inputs.map((item, index) => <Input
ref = {refsObject[item.name]}
/>
)}
есть ли побочные эффекты от использования этого метода именно таким образом?