Javascript 如何在react中生成唯一的id。js组件

我在组件中有一个render函数，负责在页面上呈现控件。到目前为止，它运行良好

render()
{
render 
(
{this.state.Inputs.map(input => {
if (input.CODE === "VARIABLE") {
  return (
    <div className="row p-1">
      <div className="col-sm-4">
        <label>
          <b>{input.LABEL_NAME}</b>
        </label>
      </div>
      <div className="col-sm-6">
        {this.renderControl(input.WIDGET_TYPE)}
        <br />
      </div>
    </div>
  );
}
})
)
}

render（）
{
提供
(
{this.state.Inputs.map（输入=>{
if（input.CODE==“变量”）{
返回(
{input.LABEL_NAME}
{this.renderControl（input.WIDGET_TYPE）}


);
}
})
)
}

下面是我的renderControl（）函数。我想在页面上呈现每个控件时为其生成唯一的ID。我不确定如何执行此操作。请您提供帮助。提前感谢

renderControl = controlName => {
  switch (controlName) {
    case "INTEGER":
    case "TEXTBOX":
    case "MEDIUM_TEXTBOX":
    case "NUMBER":
      return <input type="text" width="70%" className="txtSize" />;
    case "DROPDOWN":
    case "DIALOG":
      return <Dropdown />;
    case "DATE":
      return (
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      );
    case "DIALOG":
      return <Dropdown />;
    case "BOOLEAN":
      return (
        <div className="some-class">
          <input type="radio" className="radio" name="x" value="y" id="y" />
          <label htmlFor="y">Yes</label>
          <input type="radio" className="radio" name="x" value="z" id="z" />
          <label htmlFor="z">No</label>
        </div>
      );
    default:
      return;
  }
};

renderControl=controlName=>{
开关（控制名称）{
案例“整数”：
案例“文本框”：
案例“中文本框”：
案例“编号”：
返回；
案例“下拉列表”：
案例“对话”：
返回；
案件“日期”：
返回(
);
案例“对话”：
返回；
案例“布尔”：
返回(
对
不
);
违约：
返回；
}
};

将代码更改为以下内容

render()
{
render 
(
{this.state.Inputs.map((input,key) => {
                if(input.ROW_CLASS_CODE === "MODEL_VARIABLE"){
                    return (
                        <div className="row p-1">
                        <div className="col-sm-4">
                        <label ><b>{input.LABEL_NAME }</b></label>
                        </div>
                        <div className="col-sm-6">
                        {this.renderControl(input.WIDGET_TYPE,key)} 
                        <br></br>
                        </div>
                        </div>
                            )
                }
})
)
}


renderControl = (controlName,key) =>{
        switch(controlName) {
            case 'INTEGER_FIELD':
            case 'SMALL_TEXTBOX':
            case 'PERCENTAGE':
            case 'MEDIUM_TEXTBOX':
            case 'REAL_NUMBER':
                case 'MONEY':
                return <input type="text" key={key} width="70%" className="txtSize" ></input>;
            case 'NARROW_DROPDOWN':
            case 'SELECTION_DIALOG':
                return (<Dropdown key={key}></Dropdown>);
            case 'DATE_FIELD':
                return (<DatePicker key={key}
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />)
            case 'SELECTION_DIALOG':
                return <Dropdown key={key}></Dropdown>;
            case 'BOOLEAN_FIELD':
                return (<div className="some-class" key={key}>
                <input type="radio" className="radio" name="x" value="y" id="y" />
                <label htmlFor="y">Yes</label>
                <input type="radio" className="radio" name="x" value="z" id="z" />
                <label htmlFor="z">No</label>
              </div>);
            default:
              return ;
          }
    }`

render（）
{
提供
(
{this.state.Inputs.map（（输入，键）=>{
if（input.ROW\u CLASS\u CODE==“MODEL\u VARIABLE”）{
返回(
{input.LABEL_NAME}
{this.renderControl（input.WIDGET_TYPE，key）}



)
}
})
)
}
renderControl=（controlName，key）=>{
开关（控制名称）{
案例“整型_字段”：
案例“小文本框”：
案例“百分比”：
案例“中文本框”：
案例“真实数字”：
“金钱”一案：
返回；
案例“窄下拉列表”：
案例“选择对话框”：
返回（）；
案例“日期字段”：
返回（）
案例“选择对话框”：
返回；
案例“布尔值_字段”：
返回(
对
不
);
违约：
返回；
}
}`

将代码更改为以下内容

render()
{
render 
(
{this.state.Inputs.map((input,key) => {
                if(input.ROW_CLASS_CODE === "MODEL_VARIABLE"){
                    return (
                        <div className="row p-1">
                        <div className="col-sm-4">
                        <label ><b>{input.LABEL_NAME }</b></label>
                        </div>
                        <div className="col-sm-6">
                        {this.renderControl(input.WIDGET_TYPE,key)} 
                        <br></br>
                        </div>
                        </div>
                            )
                }
})
)
}


renderControl = (controlName,key) =>{
        switch(controlName) {
            case 'INTEGER_FIELD':
            case 'SMALL_TEXTBOX':
            case 'PERCENTAGE':
            case 'MEDIUM_TEXTBOX':
            case 'REAL_NUMBER':
                case 'MONEY':
                return <input type="text" key={key} width="70%" className="txtSize" ></input>;
            case 'NARROW_DROPDOWN':
            case 'SELECTION_DIALOG':
                return (<Dropdown key={key}></Dropdown>);
            case 'DATE_FIELD':
                return (<DatePicker key={key}
                    selected={this.state.startDate}
                    onChange={this.handleChange}
                />)
            case 'SELECTION_DIALOG':
                return <Dropdown key={key}></Dropdown>;
            case 'BOOLEAN_FIELD':
                return (<div className="some-class" key={key}>
                <input type="radio" className="radio" name="x" value="y" id="y" />
                <label htmlFor="y">Yes</label>
                <input type="radio" className="radio" name="x" value="z" id="z" />
                <label htmlFor="z">No</label>
              </div>);
            default:
              return ;
          }
    }`

render（）
{
提供
(
{this.state.Inputs.map（（输入，键）=>{
if（input.ROW\u CLASS\u CODE==“MODEL\u VARIABLE”）{
返回(
{input.LABEL_NAME}
{this.renderControl（input.WIDGET_TYPE，key）}



)
}
})
)
}
renderControl=（controlName，key）=>{
开关（控制名称）{
案例“整型_字段”：
案例“小文本框”：
案例“百分比”：
案例“中文本框”：
案例“真实数字”：
“金钱”一案：
返回；
案例“窄下拉列表”：
案例“选择对话框”：
返回（）；
案例“日期字段”：
返回（）
案例“选择对话框”：
返回；
案例“布尔值_字段”：
返回(
对
不
);
违约：
返回；
}
}`

更改这4行：

this.state.Inputs.map((input, index) =>

返回；

更改这4行：

this.state.Inputs.map((input, index) =>

返回；

假设标签名称是唯一的，则从输入对象传递唯一标识符。 如果没有，则从map函数传递索引

{this.state.Inputs.map((input, index) => {
if (input.ROW_CLASS_CODE === "MODEL_VARIABLE") {
  return (
    <div className="row p-1" key={input.LABEL_NAME}> // Change this line
      <div className="col-sm-4">
        <label>
          <b>{input.LABEL_NAME}</b>
        </label>
      </div>
      <div className="col-sm-6">
        {this.renderControl(input.WIDGET_TYPE)}
        <br />
      </div>
    </div>
  );
}

{this.state.Inputs.map（（输入，索引）=>{
if（input.ROW\u CLASS\u CODE==“MODEL\u VARIABLE”）{
返回(
//换行
{input.LABEL_NAME}
{this.renderControl（input.WIDGET_TYPE）}


);
}

假设标签名称是唯一的，则从输入对象传递唯一标识符。 如果没有，则从map函数传递索引

{this.state.Inputs.map((input, index) => {
if (input.ROW_CLASS_CODE === "MODEL_VARIABLE") {
  return (
    <div className="row p-1" key={input.LABEL_NAME}> // Change this line
      <div className="col-sm-4">
        <label>
          <b>{input.LABEL_NAME}</b>
        </label>
      </div>
      <div className="col-sm-6">
        {this.renderControl(input.WIDGET_TYPE)}
        <br />
      </div>
    </div>
  );
}

{this.state.Inputs.map（（输入，索引）=>{
if（input.ROW\u CLASS\u CODE==“MODEL\u VARIABLE”）{
返回(
//换行
{input.LABEL_NAME}
{this.renderControl（input.WIDGET_TYPE）}


);
}

map函数中的索引传递给它。@ritaj你能帮我做一个例子吗？谢谢，发布了一个答案。从map函数中的索引传递给它。@ritaj你能帮我做一个例子吗？谢谢，发布了一个答案。我已经按照你的代码和下面的答案做了同样的事情。但是现在控制自己不被渲染。在添加索引之前至少在映射函数中，我在页面上获取控件。我已根据您的代码和下面的答案执行了相同的操作。但现在控制自身，不进行渲染。在映射函数中添加索引之前，我至少在页面上获取控件。您缺少向renderControl函数传递键。我已根据您的答案执行了相同的操作。但现在控制自身未被渲染。在添加映射函数中的键之前，我至少在页面上获得控件。您缺少将键传递给renderControl函数的功能。我已按照您的回答执行了相同的操作。但现在控制自身未被渲染。在添加映射函数中的键之前，我在页面上获得控件。Karan，我没有获得e回答。我的标签名称在整个页面上都是唯一的。如何准确地使用上述代码。提前感谢。当您从映射函数返回时，您需要在每个项目中传递一个唯一的id作为键。在您的情况下，唯一的id是标签名称。但它如何区分。我无法在控制台中看到控件生成的id。ThanksA“键?