React:我可以使用名为“ index”的道具

时间:2019-05-27 15:27:19

标签: javascript reactjs react-hooks

您可以从下面的代码块中看到,在 Description.js 中,我必须向下传递名为 的属性,因为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 个答案:

答案 0 :(得分:2)

您的操作没有任何问题,但是您可以根据需要调用prop和function参数。它不必命名为index。他们甚至不必相同。

您可以执行此操作,并且将完全相同:

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} />


答案 1 :(得分:2)

否,索引不是保留的道具名称。实际上,我所知道的唯一保留名称是refkey