如何將兩個回調傳遞給React.cloneElement

Question

我目前通過使用兩個回調傳遞給子組件

React.cloneElement

在檢查項目時，我注意到activeRow始終存在，但deactivateRow是undefined 。

您能告訴我什么會導致此問題嗎？

export class Row extends React.Component<Props, State> {
  state: State = {
    isActive: false,
  }
  activeRow = () => {
    this.setState({ isActive: true })
  }

  deactivateRow = () => {
    this.setState({ isActive: false })
  }

  render(): JSX.Element {
    const { classes, children } = this.props
    const { isActive } = this.state
    return (
      <TableRow className={isActive ? classes.active: classes.noActive}>
        {React.cloneElement(this.props.children, {
          activeRow: this.activeRow,
          deactivateRow: this.deactivateRow,
        })}
      </TableRow>
    )
  }
}

Answer 1

React.cloneElement ，僅克隆一個single React element ，要克隆多個子元素，您需要映射所有子元素並將其克隆

export class Row extends React.Component<Props, State> {
  state: State = {
    isActive: false,
  }
  activeRow = () => {
    this.setState({ isActive: true })
  }

  deactivateRow = () => {
    this.setState({ isActive: false })
  }

  render(): JSX.Element {
    const { classes, children } = this.props
    const { isActive } = this.state
    return (
      <TableRow className={isActive ? classes.active: classes.noActive}>
        {React.Children.map(this.props.children, (child) => {
           return React.cloneElement(child, {
                  activeRow: this.activeRow,
                  deactivateRow: this.deactivateRow
              }
          }
       )}
      </TableRow>
    )
  }
}