Question

我在React中有一个由row组件组成的手风琴，该组件在body父组件内循环。在row我切换状态showDetails以显示/隐藏每行details，有效地打开手风琴项目。但是，由于状态是针对每一行，当我打开另一个时，如何关闭一个手风琴项？

体：

export default class Body extends React.Component {
  render() {
    const {modelProps, showInfo, linkedRow} = this.props;
    return (
      <div className="c-table__body">
        {this.props.model.map(
          (subModel, i) =>
            linkedRow ?
              <LinkedRow
                key={`${i}`}
                model={subModel}
                modelProps={modelProps}
              />
              :
              <Row
                key={`${i}_${subModel.username}`}
                model={subModel}
                modelProps={modelProps}
                showInfo={showInfo}
                handleStatusChanged={this.props.handleStatusChanged}
              />
        )}
      </div>
    );
  }
}

行：

class Row extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userId: '',
      showDetails: false,
      showModal: false,
      status: '',
      value: '',
      showInfo: false
    };
      render() {
        const { model, modelProps, showInfo } = this.props;
        return (
          <div className="c-table__row">
            <div className="c-table__row-wrapper">
              {modelProps.map((p, i) => (
                <div className={`c-table__item ${this.isStatusCell(model[p]) ? model[p] : p}`} key={i}>{this.isStatusCell(model[p]) ? this.toTitleCase(model[p]) : model[p]}</div>
              ))}

              {showInfo ? (
                <div className="c-table__item c-table__item-sm">
                  <a
                    name="view-user"
                    onClick={this.showDetailsPanel}
                    className={this.state.showDetails ? 'info showing' : 'info'}
                  >
                    <Icon yicon="Expand_Cross_30_by_30" />
                  </a>
                </div>
              ) : (
                ''
              )}
            </div>
            {this.state.showDetails ? (<ConnectedDetails user={model} statusToggle={this.handleStatusChange}/>) : null}
          </div>
        );
      }

}

export default Row;

不确定如何解决这个问题，或许body中的某些内容可以根据行中的row状态检查是否有任何showDetails打开？

提前致谢

Answer 1

方法是解除<Row />对<Body />组件开放的状态。此外，在已打开的<Row />之间切换的方法位于<Body />组件上。

toggleOpen = (idx) => {
 this.setState({ openRowIndex: idx });
}

然后当你渲染<Row />时，你可以传递道具isOpen：

<Row
   key={`${i}_${subModel.username}`}
   model={subModel}
   modelProps={modelProps}
   showInfo={showInfo}
   handleStatusChanged={this.props.handleStatusChanged}
   isOpen={this.state.openRowIndex === i}
   onToggle={_ => this.toggleOpen(i)}
/>

React Js自定义手风琴，当时打开一个项目

1 个答案: