Question

我正在制作一个简单的UI组件及其子组件。

/* Checkbox.jsx */
const Checkbox = React.forwardRef((props, ref)=>{
  return (
    <input type="checkbox" ref={ref} />
  ) 
});
const Group = (props) => (<div>Group</div>);

Checkbox.Group = Group;
export default Checkbox;

它不适用于React.forwardRef()。

在没有React.forwardRef()的情况下，此代码很好用，但我也想使用forwardRef()。

我想这样使用它

function App(){
  return (
    <div>
      <Checkbox />
      <Checkbox.Group />
    </div>
  )
}

谢谢。

Answer 1

您尝试单独导出它们吗？

/* Checkbox.jsx */
const Checkbox = React.forwardRef((props, ref)=>{
  return (
    <input type="checkbox" ref={ref} />
  ) 
});
const Group = (props) => (<div>Group</div>);

export funcs = {
Checkbox,
Group
}

export default funcs;

并在父级中：

import funcs from './Checkbox.jsx';

function App(){
  return (
    <div>
      <funcs.Checkbox />
      <funcs.Group />
    </div>
  )
}

具有forwardRef的子组件

1 个答案: