Javascript 如何更改react js中标记的名称

如何在jsx中添加/更改输入标记的名称？可能使用的术语是错误的，因为我是react js的新手。在表格标题中，我需要添加单选按钮以及标题文本，每个标题都应该有不同的单选按钮名称。我能够添加单选按钮，但在给它们一个动态名称时遇到了麻烦（最好是标题索引，如下代码所示）

import React，{Component}来自“React”；
导入“/Table.css”；
从“/Button”导入{Button}；
从“react bootstrap”导入{Table}；
类表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：{}，
selectedFile:null，
上传：空，
响应数据：“”，
已单击：0，
};
this.checked=this.checked.bind（this）；
}
headers=this.props.data[0]；
body=this.props.data[1]；
检查（事件）{
this.setState（{单击：1}）；
}
render（）{
const clicked=this.state.clicked；
让单选按钮；
如果（this.props.param==“OneRadio”）{
单选按钮=；
}否则{
单选按钮=(
**{/*标题包含10个元素的列表，每个单选按钮应具有不同的
名称*/}**


x电台


无线电y
);
}
返回(
{this.headers.map（（头，索引）=>(
{header}
{/*此处显示每个标题的单选按钮
但是对于每个迭代，单选按钮名称应该附加索引*/}
{单选按钮}
))}
{this.body.map（（项，索引）=>(
{items.map（（子项，sIndex）=>(
{子项}
))}
))}
查看数据
);
}
}
导出默认表；

预期产出：

电流输出：

---

如果有人能引导我度过这一关，那将是一个很大的帮助。我想知道是否有更好的方法来编写整个代码，因为这是我第一次使用react

您可以使用

map

回调的

索引

为每个无线电输入设置不同的名称：

import React, { Component } from "react";
import "./Table.css";
import { Button } from "./Button";
import { Table } from "react-bootstrap";
class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {},
      selectedFile: null,
      uploaded: null,
      resp_data: "",
      clicked: 0,
    };
    this.checked = this.checked.bind(this);
  }

  headers = this.props.data[0];
  body = this.props.data[1];
  checked(event) {
    this.setState({ clicked: 1 });
  }

  render() {
    const clicked = this.state.clicked;
    let header_radio_buttons = this.headers.map((header, index) => {
        if (this.props.param === "OneRadio") {
              radio_buttons = <input name="select-radio" type="radio"></input>;
            } else {
              radio_buttons = (
                <>
                  **{/* headers contains a list of 10 elemets and each radio button should have different
                   name */}**
                  <br />
                  <label className="label_label">Radio x</label>
                  <input name={"select-radio" +  (index+1)} type="radio"></input>
                  <br />
                  <label className="label_label ">Radio y</label>
                  <input name={"select-radio" +  (index+1)} type="radio"></input>
                </>
              );
            }
        return(
               <th key={index}>
                 <label>{header}</label>
                 {radio_buttons}
                </th>
        );
    });

    let radio_buttons;


    return (
      <div className="table-div">
        <Table responsive bordered hover>
          <thead>
            <tr>
                 {header_radio_buttons}

            </tr>
          </thead>
          <tbody>
            {this.body.map((items, index) => (
              <tr>
                {items.map((subItems, sIndex) => (
                  <>
                    <td>{subItems}</td>
                  </>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
        <Button buttonStyle="btn--secondary" buttonSize="btn--small">
          view data
        </Button>
      </div>
    );
  }
}

export default Tables;

import React，{Component}来自“React”；
导入“/Table.css”；
从“/Button”导入{Button}；
从“react bootstrap”导入{Table}；
类表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：{}，
selectedFile:null，
上传：空，
响应数据：“”，
已单击：0，
};
this.checked=this.checked.bind（this）；
}
headers=this.props.data[0]；
body=this.props.data[1]；
检查（事件）{
this.setState（{单击：1}）；
}
render（）{
const clicked=this.state.clicked；
让header\u单选按钮=this.headers.map（（header，index）=>{
如果（this.props.param==“OneRadio”）{
单选按钮=；
}否则{
单选按钮=(
**{/*标题包含10个元素的列表，每个单选按钮应具有不同的
名称*/}**


x电台


无线电y
);
}
返回(
{header}
{单选按钮}
);
});
让单选按钮；
返回(
{标题\单选按钮}
{this.body.map（（项，索引）=>(
{items.map（（子项，sIndex）=>(
{子项}
))}
))}
查看数据
);
}
}
导出默认表；

它工作起来很有魅力！！非常感谢艾哈迈特的帮助。请您对整个代码给出您的意见，这是正确的实现方法还是有更好的方法？欢迎@liquiddeath。对于代码，我建议您在render（）函数中定义标题和主体属性，而不是在组件上定义它们。在react中，通常不建议在类上定义除state对象之外的新属性。

import React, { Component } from "react";
import "./Table.css";
import { Button } from "./Button";
import { Table } from "react-bootstrap";
class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      project: {},
      selectedFile: null,
      uploaded: null,
      resp_data: "",
      clicked: 0,
    };
    this.checked = this.checked.bind(this);
  }

  headers = this.props.data[0];
  body = this.props.data[1];
  checked(event) {
    this.setState({ clicked: 1 });
  }

  render() {
    const clicked = this.state.clicked;
    let header_radio_buttons = this.headers.map((header, index) => {
        if (this.props.param === "OneRadio") {
              radio_buttons = <input name="select-radio" type="radio"></input>;
            } else {
              radio_buttons = (
                <>
                  **{/* headers contains a list of 10 elemets and each radio button should have different
                   name */}**
                  <br />
                  <label className="label_label">Radio x</label>
                  <input name={"select-radio" +  (index+1)} type="radio"></input>
                  <br />
                  <label className="label_label ">Radio y</label>
                  <input name={"select-radio" +  (index+1)} type="radio"></input>
                </>
              );
            }
        return(
               <th key={index}>
                 <label>{header}</label>
                 {radio_buttons}
                </th>
        );
    });

    let radio_buttons;


    return (
      <div className="table-div">
        <Table responsive bordered hover>
          <thead>
            <tr>
                 {header_radio_buttons}

            </tr>
          </thead>
          <tbody>
            {this.body.map((items, index) => (
              <tr>
                {items.map((subItems, sIndex) => (
                  <>
                    <td>{subItems}</td>
                  </>
                ))}
              </tr>
            ))}
          </tbody>
        </Table>
        <Button buttonStyle="btn--secondary" buttonSize="btn--small">
          view data
        </Button>
      </div>
    );
  }
}

export default Tables;