React JS中如何在onClick触发的函数内调用自定义组件

你当前的写法是错误的，点击事件回调里返回的组件不会被React识别渲染，需要通过状态控制编辑组件的展示，具体实现如下：

类组件实现方案 #

1. 先给组件添加两个状态，分别控制编辑组件是否展示、存储当前要编辑的用户ID

constructor(props) {
  super(props);
  this.state = {
    isEditVisible: false,
    currentEditId: null
  }
}

2. 修改edit方法，点击时仅修改状态，不要直接返回组件

edit = (id) => {
  this.setState({
    isEditVisible: true,
    currentEditId: id
  })
}

3. 在render方法中通过状态条件渲染Editbranches组件，还可以把编辑ID和关闭回调通过props传递给组件

render() {
  return (
    <div>
      {/* 原有页面内容，包含你的编辑按钮 */}
      <button onClick={() => this.edit(n.id)}>Edit</button>

      {/* 条件渲染编辑组件 */}
      {this.state.isEditVisible && (
        <Editbranches 
          editId={this.state.currentEditId}
          onClose={() => this.setState({isEditVisible: false, currentEditId: null})}
        />
      )}
    </div>
  )
}

函数组件实现方案 #

逻辑和类组件完全一致，只是用useState管理状态：

import { useState } from 'react'

function YourComponent() {
  const [isEditVisible, setIsEditVisible] = useState(false)
  const [currentEditId, setCurrentEditId] = useState(null)

  const edit = (id) => {
    setCurrentEditId(id)
    setIsEditVisible(true)
  }

  return (
    <div>
      <button onClick={() => edit(n.id)}>Edit</button>
      {isEditVisible && (
        <Editbranches 
          editId={currentEditId}
          onClose={() => {
            setIsEditVisible(false)
            setCurrentEditId(null)
          }}
        />
      )}
    </div>
  )
}

如果Editbranches是弹窗类组件，内部调用传入的onClose方法即可关闭编辑状态。

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