在你的文件 text.js 中

在第 9 行。请将之前的代码替换为： {this.props.children}

在沙箱中尝试过并为我工作。

/// 不能添加评论所以编辑答案本身。Accordian.js 包含您的钩子 expandAll 并且标题布尔值已经发生 GetAccordian.js。我建议将 expand all 移动到 GetAccordian.js 以便您可以控制这两个值。

在这种情况下 this.props.render 不是函数并且 this.props.text 未定义，请尝试替换此行

  <div className={`content open`}>
    {this.props.render && this.props.render(this.props.text)}
  </div>

这样：

  <div className={`content open`}>
   {this.props.children}
  </div>

编辑：// 其他解决方案是将 expandAll 属性传递给手风琴组件

  <Accordion expandAll={expandAll}>
    <Heading>
      <div className="heading-box">
        <h1 className="heading">{item.heading}</h1>
      </div>
    </Heading>
    <Text>
      <p className="text">{item.text}</p>
    </Text>
  </Accordion>

然后在 getAccordion.js

onShow = (i) => {
      this.setState({
        active: this.props.expandAll ? -1: i,
        reserve: this.props.expandAll ? -1: i
      });

      if (this.state.reserve === i) {
        this.setState({
          active: -1,
          reserve: -1
        });
      }
    };

    render() {
      const children = React.Children.map(this.props.children, (child, i) => {
        return React.cloneElement(child, {
          heading: this.props.expandAll || this.state.active === i,
          text: this.props.expandAll || this.state.active + stage === i,
          onShow: () => this.onShow(i)
        });
      });
      return <div className="accordion">{children}</div>;
    }
  };

基于@lissettdm 的回答，我不清楚为什么getAccordion并且accordion是两个独立的实体。您可能有一个非常有效的分离理由，但两个组件的状态是相互依赖的这一事实暗示它们可能更好地实现为一个组件。

Accordion 现在像以前一样直接控制其子项的状态，但不使用 getAccordion。切换 expandAll 现在也会重置单个项目的状态。

const NormalAccordion = () => {
  const accordionArray = [ //... your data ];

  const [state, setState] = useState({
    expandAll: false,
    ...accordionArray.map(item => false),
  });

  const handleExpandAll = () => {
    setState((prevState) => ({
      expandAll: !prevState.expandAll,
      ...accordionArray.map(item => !prevState.expandAll),
    }));
  };

  const handleTextExpand = (id) => {
    setState((prevState) => ({
      ...prevState,
      [id]: !prevState[id]
    }));
  };

  return (
    <>
      <div className="w-full text-right">
        <button onClick={handleExpandAll}>
          {state.expandAll ? `Collapse All` : `Expand All`}
        </button>
      </div>
      <br />
      {accordionArray.map((item, index) => (
        <div key={index}>
          <div className="accordion">
            <Heading handleTextExpand={handleTextExpand} id={index}>
              <div className="heading-box">
                <h1 className="heading">{item.heading}</h1>
              </div>
            </Heading>
            <Text shouldExpand={state[index]}>
              <p className="text">{item.text}</p>
            </Text>
          </div>
        </div>
      ))}
    </>
  );
};

Heading 传回索引，以便父组件知道要关闭哪个项目。

class Heading extends React.Component {
  handleExpand = () => {
    this.props.handleTextExpand(this.props.id);
  };


  render() {
    return (
      <div
        style={ //... your styles}
        onClick={this.handleExpand}
      >
        {this.props.children}
      </div>
    );
  }
}

Text 只关心一个 prop 来确定它是否应该显示展开内容。

class Text extends React.Component {
  render() {
    return (
      <div style={{ ...this.props.style }}>
        <div
          className={`content ${this.props.shouldExpand ? "open" : ""}`}
        >
          {this.props.shouldExpand ? this.props.children : ""}
        </div>
      </div>
    );
  }
}