如何在反应中生成唯一 ID。 js组件答案

【问题标题】：How to generate unique ids in react. js component如何在反应中生成唯一 ID。 js组件
【发布时间】：2020-04-01 13:59:36
【问题描述】：

我在组件中有一个渲染函数，负责在页面上渲染控件。到目前为止，它工作正常。

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

下面是我的 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;
  }
};

【问题讨论】：

从 map 函数中传递索引。
@ritaj 你能帮忙举个例子吗？谢谢
当然，已发布答案。

标签： javascript reactjs unique-key

【解决方案1】：

更改这 4 行：

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

{this.renderControl(input.WIDGET_TYPE, index)}

renderControl = (controlName, index)

return <input type="text" key={index} width="70%" className="txtSize" ></input>;

【讨论】：

我按照你的代码和下面的答案做了同样的事情。但是现在控制自己不被渲染。在地图功能中添加索引之前，至少我在页面上获得了控件。

【解决方案2】：

从输入对象传递一个唯一标识符，假设 LABEL_NAME 是唯一的。如果没有，则从 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>
  );
}

【讨论】：

卡兰我没有得到答案。我的标签名称在整个页面中是唯一的。如何准确地使用上面的代码。提前致谢。
当您从 map 函数返回时，您需要在每个项目中传递一个唯一的 id 作为 Key。在您的情况下，唯一 ID 是标签名称。
但它是如何产生差异的。我看不到为控制台中的控件生成的 ID。谢谢
“键”是创建元素列表时需要包含的特殊字符串属性。更多关于 - reactjs.org/docs/lists-and-keys.html

【解决方案3】：

将您的代码更改为以下内容

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

【讨论】：

您缺少将密钥传递给 renderControl 函数。我已经按照你的回答做了同样的事情。但是现在控制自己不被渲染。在地图功能中添加键之前，我至少在页面上获得了控件。