我正在尝试将从react-bootstrap useAccordionToggle函数返回的装饰过的onClick函数传递到组件中,以便我可以通过该组件上的交互隐藏Accordion。但是出现了问题,创建的装饰函数无法正确访问react-bootstrap设置的上下文(似乎在SelectableContext here上出现问题)。我对React还比较陌生,在研究为什么不起作用时才了解上下文,如果我的困惑来自那里,我也不会感到惊讶。它似乎没有在方法构建时获取正确的上下文。
我已经包含了一个小型测试案例点击此处查看fiddle:
我已经包含了一个小型测试案例点击此处查看fiddle:
import React from "react";
import ReactDOM from "react-dom";
import { Button, Accordion, Card, useAccordionToggle } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
const InternalComponent = props => {
console.log(props.onClick);
return (
<div>
<button onClick={() => props.onClick()}>here for seeing</button>
</div>
);
};
function App() {
const x = useAccordionToggle(0, () => {
/**/
});
return (
<div className="App">
<>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
create new group
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<InternalComponent onClick={x} />
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);