Javascript 反应：我可以使用名为“的道具”吗；索引“；

您可以从下面的代码块中看到，Description.js中我必须传递一个名为“index”的属性，因为

handleChange

是一个必须使用两个参数调用的函数

handleChange（newValue，index）

handleChange

函数更新状态，在本例中，如果长度为3，则为数组（每个输入一个值）

由于

索引

是由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} />;
}

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

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

import React，{useState，useCallback}来自“React”；
从“react dom”导入react dom；
从“/Description”导入说明；
函数App（）{
log（“渲染应用程序…”）；
常量[inputValues，setInputValues]=useState（[“”，“”，“”]）；
const handleChange=useCallback（（新值，索引）=>{
设置输入值（prevState=>{
const aux=Array.from（prevState）；
aux[索引]=新值；
返回aux；
});
}, []);
回来
}

Description.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} />;
}

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

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

从“React”导入React；
从“/TextInput”导入TextInput；
功能描述（道具）{
日志（“呈现描述…”）；
const inputItems=props.values.map（（项目，索引）=>(
输入{index+1}
));
返回{inputItems}；
}

TextInput.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} />;
}

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

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

从“React”导入React；
const TextInput=React.memo（函数TextInput（props））{
log（“呈现文本输入…”+props.index）；
返回(
props.handleChange（event.target.value，props.index）}
/>
);
});

您所做的没有错，但是您可以随意调用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} />

const TextInput=React.memo（函数TextInput（道具）{
log（“呈现文本输入…”+props.wookie）；
返回(
props.handleChange（event.target.value，props.wookie）}
/>
);
});
//然后。。。

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

ref

和

key