将 forwordRef 与状态反应

Question

我正在使用 react-bootstrap Collapse，它使用 useState 挂钩管理可折叠项目的状态，如下所示：

function Example() {
 const [open, setOpen] = useState(false);

 return (
   <>
    <Button onClick={() => setOpen(!open)} aria-controls="example-collapse-text" aria-expanded{open}>
    click
  </Button>
  <Collapse in={open}>
    <div id="example-collapse-text">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
      terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
      labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </Collapse>
  </>
);
}

因为我在我的网站几乎所有地方都使用这个可折叠项目，所以我决定创建 ref 项目并且每次都像这样传递可折叠数据：

const CollapsableWidget = React.forwardRef((props, ref) => (
 <div className={classes.collapseWrapper}>
<div className={classes.collapseTitle} aria-controls={props.id} aria-expanded={props.open}>
  {props.title}
</div>
<Collapse in={props.open}>
  <div id={props.id} ref={ref}>
    {props.children}
  </div>
</Collapse>
 </div>
));

但是我失去了“控制”可折叠项目的打开和设置打开的选项。

我有哪些选择？

Answer 1

我认为您的 ref 道具放错了地方。它应该在您要控制的组件中。

这里是：

const CollapsableWidget = React.forwardRef((props, ref) => (
     <div className={classes.collapseWrapper}>
    <div className={classes.collapseTitle} aria-controls={props.id} aria-expanded={props.open}>
      {props.title}
    </div>
    <Collapse in={props.open} ref={ref}>
      <div id={props.id}>
        {props.children}
      </div>
    </Collapse>
     </div>
    ));

这是变化

 <Collapse in={props.open} ref={ref}>
          <div id={props.id}>
            {props.children}
          </div>
        </Collapse>

Answer 2

如果您不必在小部件外部控制其 open 状态，则可以在内部控制状态

const CollapsableWidget = React.forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  ...

如果你这样做，那么你可以在例如数组中跟踪你的折叠状态

const [collapseStates, setCollapseStates] = useState([
  {
    id: "1",
    open: false,
    title: "click me",
    content: "content"
  },
  {
    id: "2",
    open: false,
    title: "click me 2",
    content: "content 2"
  }
]);

将 forwordRef 与状态反应

React forwordRef with state

reactjs

react-bootstrap