React中通过地图函数传递道具

Posted 2021-04-27

我知道如何在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> }

这里是父组件传递的道具：我不知道该如何处理onClick={() => { this.handleDeleteClick(index) }}，因为我需要组件中index函数中的.map()。我希望所有这些都有意义，并且我很乐意添加更新，我不确定如何解释该问题，这可能就是为什么我无法解决该问题。还是React的新手。

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

答案

您可以从道具中移除箭头功能，并将方法作为道具传递给您。更改此代码（请查看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> }