如何使用功能组件将React-Popper与渲染支柱一起使用

Question

        `
        <Manager><div role="presentation"
                id="popover"
                className={popoverClasses}
                onClick={onDismiss}
                onKeyUp={onDismiss}
              >{backdrop && <div className={styles.popover__backdrop} />}
                <div ref={popoverRef}> --how to implement
                  <Reference>
                    {({ ref }) => {
    // how can we implement ref
                      ref = ref; -- how to implement
                      const targetProps = {
                        ref: setReferenceRef,
                        // Accessibility
//event handler
                        onKeyUp: (keyUpEvent) => {
                          if (
                            ['Enter', 'Space Bar', 'Spacebar', ' '].includes(

//活动处理程序的关键 keyupevent.key， ） ）{ 如果（！打开）{ 一个vent（）; } 别的 { OnReferenceClickClose（）; } } }，， [on $ {event [0] .touppercase（）} $ {event.substr（1）}]：！open ？ onevent（） ：on ReferenceClickClose（）， }; 返回 （ ＆lt; span 角色=“按钮” className = {styles.popover__reference} tabindex = {tabindex} aria-haspopup =“对话” {... TargetProps} ＆gt; {参考} {reficon} ）； }}} ＆lt; popper 放置= {position} 修改器= {{{ ...修饰符， 预防流：{ 边界：边界， }，， }}} ＆gt; {（{Ref，位置，Arrowprops}）=＆gt; （（ {title＆amp;＆amp; {标题}} {儿童（ClosePopover）} ） `