如何使PrimeReact FieldSet在Reaction上从其他(父)组件可控?

我有一个布尔对象toggled,我想将它传递给子组件.

toggled=true时,应打开FieldSet.

toggled=false时,应关闭FieldSet.

Edit interesting-maxwell-9s1vx1

import React from "react";
import { Fieldset } from "primereact/fieldset";

const FieldsetDemo = () => {
  return (
    <div>
      <div className="card">
        <h5>Toggleable</h5>
        <Fieldset legend="Header" toggleable>
          <p>
            Lorem ipsum dolor sit amet.
          </p>
        </Fieldset>
      </div>
    </div>
  );
};

推荐答案

这很简单.工作代码沙箱:https://codesandbox.io/s/quizzical-snow-so91tv?file=/src/demo/FieldsetDemo.js

const FieldsetDemo = (props) => {
  return (
    <div>
      <div className="card">
        <h5>Toggleable</h5>
        <Fieldset legend="Header" toggleable collapsed={props.collapsed}>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </Fieldset>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<FieldsetDemo collapsed={true} />, rootElement);

Reactjs相关问答推荐

使用useEffect挂钩获取数据

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画?

折叠并重新打开react 手风琴将重置内部状态

React useEffect 问题...异步函数内的变量正在获取延迟的更新值

有没有办法在 React Router v6 中的路由匹配上运行一些逻辑/功能?

如何管理组件列表的复杂状态? (Nextjs/ReactJS)

如何在 ChartJS 中创建此图表?在 NEXTjs 和 TSX 中

为什么在 React 的 useEffect 中使用 onAuthStateChanged ?

如何将 DocuSign 控制台界面嵌入到 React 应用中

将外部 JavaScript 导入 React(通过文件)

为什么我会收到此错误:无法在我的react 包上读取 null 的属性(读取useState)?

为什么刷新页面时我的localStorage PET值变成空字符串?

如何在 ReactJS 中提交后删除 URL 中的查询参数

如何在react 中正确销毁上下文?

NextJS htaccess 设置

Reactjs 表单未反映提交时的更改

在 Formik 表单中访问子组件的值

设置 Material UI 表格默认排序

axios post方法中的请求失败,状态码为500错误

bootstrap 导航栏切换器在 reactjs 中不起作用