使用 map 函数在 React 中传递道具

Posted 2023-02-23

【中文标题】使用 map 函数在 React 中传递道具

【英文标题】：passing props in React with a map function

【发布时间】：2020-09-30 10:58:28

【问题描述】：

我知道如何在 React 中传递基本的道具，但我对这个有点难过。我认为展示会更好地解决问题，而不是试图在本段中解释所有内容。

这是在试图将其分解为自己的独立组件之前的情况。

     <div className="flex-item-main">
         <ol>
            this.state.thoughts.map((thought, index)=> 
                <DisplayPoem className='displayPoem' key=index onClick=() =>  this.handleDeleteClick(index)  name='Delete Thoughts' value=thought />
            )
          </ol>
         </div> 

这是它自己的独立组件从父组件获取道具的外观：

     <div className="flex-item-main">
         <ol>
            this.props.thoughtsProp.map((thought, index)=> 
                <DisplayPoem className='displayPoem' key=index onClick=this.props.onClick name=this.props.name value=thought />
            )
          </ol>
         </div> 

这是传递 props 的父组件：我不知道如何处理 onClick=() => this.handleDeleteClick(index) ，因为我需要组件中 .map() 函数中的 index。我希望这一切都有意义，我很乐意添加更新，我不知道如何解释这个问题，这可能是我无法解决它的原因。 React 还是新手。

         <DisplayPoemList thoughtsProp=this.state.thoughts  onClick=() =>  this.handleDeleteClick(index)  name='Delete Thoughts' />

【参考方案1】：

您可以从道具中删除箭头功能并将方法作为道具传递给您。 更改此代码（查看onClick）：

<DisplayPoemList thoughtsProp=this.state.thoughts  onClick=() =>  this.handleDeleteClick(index)  name='Delete Thoughts' />

到此代码：

<DisplayPoemList thoughtsProp=this.state.thoughts  onClick=this.handleDeleteClick  name='Delete Thoughts' />

然后你的DisplayPoemList 将得到一个函数onClick，它在调用时期待index。 使用箭头函数创建函数的实例，并在每个元素的范围内创建索引。

     <div className="flex-item-main">
         <ol>
            this.props.thoughtsProp.map((thought, index)=> 
                <DisplayPoem className='displayPoem' key=index onClick=() => this.props.onClick(index) name=this.props.name value=thought />
            )
          </ol>
         </div>