Реагировать: могу ли я использовать реквизит с именем "index" - PullRequest
Новая
       23

Реагировать: могу ли я использовать реквизит с именем "index"

2 голосов
/ 27 мая 2019

Из блоков кода ниже видно, что внутри Description.js Мне пришлось передать реквизит с именем "index" , потому что handleChange - это функция, которая должна бытьвызывается с двумя параметрами handleChange(newValue,index).

Функция handleChange обновляет состояние, которое в данном случае представляет собой массив, если длина 3 (одно значение для каждого входа).

И так какindex создается компонентом Description.js , я должен был передать это как реквизит.

Он работает как положено.

ВОПРОС

Это плохая практика?Является ли index зарезервированным словом (React, Javascript или HTML)?

Есть ли лучший подход к этому?

App.js 

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Description from "./Description";

function App() {
  console.log("Rendering App...");
  const [inputValues, setInputValues] = useState(["", "", ""]);

  const handleChange = useCallback((newValue, index) => {
    setInputValues(prevState => {
      const aux = Array.from(prevState);
      aux[index] = newValue;
      return aux;
    });
  }, []);

  return <Description values={inputValues} handleChange={handleChange} />;
}

Description.js 

import React from "react";
import TextInput from "./TextInput";

function Description(props) {
  console.log("Rendering Description...");
  const inputItems = props.values.map((item, index) => (
    <div key={index}>
      <div>Input {index + 1}</div>
      <TextInput value={item} handleChange={props.handleChange} index={index} />
    </div>
  ));

  return <React.Fragment>{inputItems}</React.Fragment>;
}

TextInput.js 

import React from "react";

const TextInput = React.memo(function TextInput(props) {
  console.log("Rendering TextInput..." + props.index);
  return (
    <input
      type="text"
      value={props.value}
      onChange={event => props.handleChange(event.target.value, props.index)}
    />
  );
});

Ответы [ 2 ]

2 голосов
/ 27 мая 2019

Нет, индекс не является зарезервированным именем реквизита.На самом деле, единственные зарезервированные имена, о которых я знаю, это ref и key

2 голосов
/ 27 мая 2019

Нет ничего плохого в том, что вы делаете, но вы можете вызывать опору и аргумент функции как хотите. Это не обязательно должен быть назван индекс. Они даже не должны быть одинаковыми.

Вы можете сделать это, и это будет работать точно так же: 

const handleChange = useCallback((newValue, bananas) => {
    setInputValues(prevState => {
      const aux = Array.from(prevState);
      aux[bananas] = newValue;
      return aux;
    });
  }, []);

То же самое с этим: 

const TextInput = React.memo(function TextInput(props) {
  console.log("Rendering TextInput..." + props.wookie);
  return (
    <input
      type="text"
      value={props.value}
      onChange={event => props.handleChange(event.target.value, props.wookie)}
    />
  );
});

// and then...
<TextInput value={item} handleChange={props.handleChange} wookie={index} />
...