如何在React js组件中生成唯一ID

Question

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

render()
{
render 
(
{this.state.Inputs.map(input => {
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)}
        <br />
      </div>
    </div>
  );
}
})
)
}

和下面是我的renderControl（）函数。我要在页面上呈现每个控件时为其生成唯一的ID。我不确定该怎么做。能否请你帮忙。提前致谢。

renderControl = controlName => {
  switch (controlName) {
    case "INTEGER_FIELD":
    case "SMALL_TEXTBOX":
    case "PERCENTAGE":
    case "MEDIUM_TEXTBOX":
    case "REAL_NUMBER":
    case "MONEY":
      return <input type="text" width="70%" className="txtSize" />;
    case "NARROW_DROPDOWN":
    case "SELECTION_DIALOG":
      return <Dropdown />;
    case "DATE_FIELD":
      return (
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      );
    case "SELECTION_DIALOG":
      return <Dropdown />;
    case "BOOLEAN_FIELD":
      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;
  }
};

Answer 1

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

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) =>{
        switch(controlName,key) {
            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 ;
          }
    }`

Answer 2

更改这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>;