React函数组件中如何动态传递参数属性渲染下拉选项字段

问题根源 #

你之前尝试的data.{DataProp}是错误的语法，JavaScript中动态访问对象属性必须使用方括号属性访问符，不能用点语法直接拼接变量。

具体修改步骤 #

1. 在组件props中添加DataProp参数
   扩展组件的参数列表，新增DataProp来接收外部传入的动态字段名，修改后的参数列表为{ContID, API, FeildName, DDClass, DataProp}。

2. 替换动态属性取值语法
   将下拉选项中的{data.Data_Feild}替换为{data[DataProp]}，通过方括号语法实现根据传入的字段名动态取值。

修改后的完整组件代码 #

function APIDropDown ({ContID, API, FeildName, DDClass, DataProp}) {
const [data, setData] = useState([]);  
useEffect(() => {
  var APIURL = 'http://localhost:4000'+API+'';
  axios
    .get(APIURL)
    .then((response) => {
      setData(response.data);
    })
    .catch(console.error);
}, []);

  return (
    <Form.Group className={DDClass} controlId={ContID}>
      <Form.Label>{FeildName}</Form.Label>
      <Form.Select aria-label={FeildName}>
        <option>--Select--</option>
        {data.map((item, index) => (
          // 把循环参数名从data改成item，避免和外层state变量重名
          <option key={index}>{item[DataProp]}</option>
        ))}
      </Form.Select>
    </Form.Group>
  ); 
}
export {APIDropDown};

额外优化建议 #

• 循环参数名从data改为item，避免和外层state变量data重名，减少代码歧义。
• 若需处理字段不存在的情况，可添加默认值，比如{item[DataProp] || '无数据'}。

使用示例 #

调用组件时传入目标字段名即可：

<APIDropDown 
  ContID="roleSelect" 
  API="/api/roles" 
  FeildName="选择角色" 
  DDClass="mb-3" 
  DataProp="role_name" 
/>

内容的提问来源于stack exchange，提问作者ids