接受带有组件的参数作为反应中的函数（快速修复）

Posted 2023-02-23

【中文标题】接受带有组件的参数作为反应中的函数（快速修复）

【英文标题】：accepting parameters with component as a function in react (quick fix)

【发布时间】：2021-09-26 03:58:35

【问题描述】：

我有以下代码：

files.map((fl) => <AudioFileListItem key=fl.id id=fl.id name=fl.name />)

我在另一个名为 Test.js 的文件中调用此组件，该文件也是一个组件。我正在尝试将这些变量传递给组件。我想知道如何修改 AudioFileListItem 以接受这些变量。

这里是组件 rn：

function AudioFileListItem() 

  return (
    <div className="AudioFileListItem">
    </div>
  );



export default AudioFileListItem;

【参考方案1】：

您需要使用props 跨组件传递数据。查看以下代码

ReactDOM.render(<App />, document.getElementById("root"));

function App() 
    const files = [
         id: 1, name: "orange" ,
         id: 2, name: "banana" ,
         id: 3, name: "coconut" ,
    ];
    return (
        <div className="App">
            <div className="bg-secondary min-vh-100">
                files.map(fl => (
                    <AudioFileListItem key=fl.id data=fl />
                ))
            </div>
        </div>
    );


function AudioFileListItem(props) 
    return <div className="AudioFileListItem">props.data.name</div>;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <div id="root">123</div>

【参考方案2】：

你需要传递给你的组件 AudioFileListItem 道具。 这是文档中的示例react-doc

你会 function AudioFileListItem(props) 在组件内部，您可以访问您的参数，例如<p>props.name</p>