Question

我有一个HOC

import React from 'react'

class Func extends React.Component  {

  addItem = () => {
    console.log('clicked')
  } 

  render(){

  const style = {
    background: 'lightgrey',
    margin: '1rem'
  }

  return (
    <div style={style}>
      {this.props.children}
    </div>
  )
 }
}

export default Func

我有一个HOC的孩子

import React from 'react'
import Func from './Func'

const AddButton = (props) => {
  return (
    <Func>
      <button onClick={props.addItem}>
       ok
      </button>
    </Func>
  )
}

export default AddButton

我想将该函数（可能还有其他一些）传递给child并在此处调用。

我看到孩子有一个很好的灰色背景，所以我认为那里有道具。但是我在react devtools中看到传递给它的函数的任何痕迹（Props read-only Empty object）。因此，单击不会产生任何结果。（（

如果已经有背景，那么函数在哪里？

如何将函数从ReactJS HOC传递给child并在此处调用？

0 个答案: