如何在React中让PrimeReact FieldSet受父组件控制？

PrimeReact的Fieldset组件自带collapsed属性用于控制折叠状态，结合你的需求，只需要把外部的toggled变量取反后绑定到该属性即可——因为collapsed={true}对应收起状态，collapsed={false}对应展开状态，刚好和你的toggled逻辑相反。

代码示例（内部状态模拟） #

如果toggled是组件内部的状态，可参考以下写法：

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

const FieldsetDemo = () => {
  // 模拟外部传入的toggled变量，实际场景可通过props接收
  const [toggled, setToggled] = useState(true);

  return (
    <div>
      <div className="card">
        <h5>Toggleable</h5>
        {/* 测试按钮：点击切换toggled状态 */}
        <button onClick={() => setToggled(!toggled)}>
          {toggled ? "点击收起" : "点击展开"}
        </button>
        {/* 绑定collapsed属性，实现toggled与展开状态的映射 */}
        <Fieldset legend="Header" toggleable collapsed={!toggled}>
          <p>
            Lorem ipsum dolor sit amet.
          </p>
        </Fieldset>
      </div>
    </div>
  );
};

代码示例（父组件传参） #

如果toggled是从父组件传入的props，写法如下：

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

// 从props接收外部传入的toggled变量
const FieldsetDemo = ({ toggled }) => {
  return (
    <div>
      <div className="card">
        <h5>Toggleable</h5>
        <Fieldset legend="Header" toggleable collapsed={!toggled}>
          <p>
            Lorem ipsum dolor sit amet.
          </p>
        </Fieldset>
      </div>
    </div>
  );
};

关键说明 #

• 保持toggleable属性开启，确保FieldSet具备折叠交互能力
• collapsed={!toggled}完成逻辑映射：
  • 当toggled=true时，collapsed=false → FieldSet展开
  • 当toggled=false时，collapsed=true → FieldSet收起

内容的提问来源于stack exchange，提问作者Darkpsinight_2