React中如何修改函数式组件使其接收传入的props参数（快速解决）

方法1：直接解构props参数（最常用） #

直接在组件的参数位置解构你传入的id和name属性即可，修改后的AudioFileListItem代码如下：

function AudioFileListItem({ id, name }) {
  // 组件内部可直接使用id、name变量，示例为打印测试
  console.log('当前音频id：', id)
  console.log('当前音频名称：', name)

  return (
    <div className="AudioFileListItem">
      {/* 示例：把名称渲染到页面 */}
      <p>音频名称：{name}</p>
    </div>
  );
}

export default AudioFileListItem;

注意：key是React专属的保留属性，不会被传递到组件内部，你在组件中无法获取到key的值，属于正常情况。

方法2：先接收完整props对象再取值 #

如果不想直接解构，也可以先拿到整个props对象，再从对象中提取对应属性：

function AudioFileListItem(props) {
  const id = props.id
  const name = props.name

  return (
    <div className="AudioFileListItem">
      <p>音频id：{id}，名称：{name}</p>
    </div>
  );
}

export default AudioFileListItem;

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