如何将两个回调传递给React.cloneElement

Question

I am current passing two callback to a child component using

React.cloneElement

when inspecting my project I notice that activeRow is always present but deactivateRow is undefined .

Could you give me an idea of what can cause this problem?

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 , just clones a single React element , for cloning more that one children element, you need to map over all the children and clone them

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>
    )
  }
}