Блог

PopupButtonTesting.js

 const PopupButtonTesting = ({metaData, items, render}) = {
 const [open,toggle] = useButtonToggle({type: 'button1', open: false})'
 return (
  <>
   <ButtonBase metaData={metaData} onClick={toggle}>
    {open amp;amp; items.map((m,i) => render(
       {...m.button1, 
       index:i, 
       onClose: toggle, 
       open})
     )}
  </>
 )
}

const ButtonBase = (mataData, onClick) => {
 const {dataField} = metaData
 return (
   <Button onClick={() => onClick('button1')}>
     show button1
   </Button>
| 
   <Button onClick={() => onClick('button2')}>
     show button2
   </Button>
 )
}
  

useButtonToggle.js

 export default (initToggleState = {type: 'button1', open: false}) => {
  const [toggleState, setState] = useState(initToggleState);
  const toggle =setState(// add some logic here maybe);
  return [toggleState, toggle]
}
  

Итак, ButtonBase компонент является дочерним компонентом PopupButtonTesting component, поэтому в этом дочернем компоненте отображаются две кнопки. Я хочу щелкнуть button1 и отобразить данные button1, а open button2 показывает данные button2, поэтому в ButtonBase я передал ‘button1’ и ‘button2’ в onClick, которые соответствуют onClick, переданному в ButtonBase , затем я хочу изменить useButtonToggle , чтобы определить тип кнопки, но я не уверен, как мне следует добавить в useButtonToggle .

Когда вы хотите передать реквизит от дочернего компонента к родительскому, лучшим способом является вызов его через параметр функции,

 const someFunc = (varFromChild) => //do something

<ChildComponent funcToChild={(paramFromChild) => someFunc(paramFromChild) }
  

Затем в дочернем компоненте

 onClick={() => props.funcToChild(something)}