javascript - 使用渲染 Prop 创建切换按钮以显示/隐藏子组件的问题

Question

使用下面的原始 HTML，我想根据切换单击显示/隐藏几个子组件。我遇到的问题是 EditToggle 链接需要显示在 h2 旁边(“字幕容器”内部)，但两个组件需要在下面呈现(“字幕容器”外部)。

在建议组件上使用 EditToggle 时，我必须将两个组件放入渲染函数中，以便它们可以看到编辑值。这不起作用，因为它们现在呈现在“字幕容器”div 内部。如何修改这些组件，以便可以使用 EditToggle 作为渲染 Prop ，但仍然让两个子组件在 html 中的“subtitle-container”之外渲染？

可选注释:原始部分 HTML 在未显示的较大父组件上重复多次。鉴于此，这就是我使用渲染 Prop 将控制切换的状态提取到其自己的组件中的原因之一。

此外，EditComponent 中的保存将返回 ReadOnlyComponent，但此处未显示编辑/读取的内部工作原理，因为它们不是问题所在。

谢谢!

原始 HTML

<div class="section" id="section-one">
  <div class="subtitle-container">
    <h2 class="subtitle">Title</h2>
    <a href="">Toggle</a>
  </div>
  <!-- ReadOnlyComponent -->
  <!-- EditComponent -->
</div>

建议的 React 组件

export class SectionComponent extends React.Component<Props> {
  render() {
    return (
      <div class="section" id="section-one">
        <div className="subtitle-container">
          <h2 className="subtitle">Title</h2>
            <EditToggle
              render={(editing) => {
              return (
                <React.Fragment>
                  {editing ? <ReadOnlyComponent /> : EditComponent }
                </React.Fragment>
              )
            }}
          />
        </div>
      </div>
    );
  }
}

建议使用渲染 Prop 的切换链接组件

export class EditToggle extends React.Component<Props> {
  constructor(props) {
    super(props);
  }

  state = {
    editing: false,
  };

  onToggle = () => {
    this.setState({
        editing: !this.state.editing,
    });
  }

  render() {
    return (
      <div>
        <a onClick={this.onToggle}></a>
        {this.props.render(this.state.editing)}
      </div>
    );
  }
}

Answer 1

我相信，这里的基本想法是一个门户 https://reactjs.org/docs/portals.html

所以我们能做的是:

export class SectionComponent extends React.Component<Props> {
  render() {
    return (
      <div class="section" id="section-one">
        <div className="subtitle-container">
          <h2 className="subtitle">Title</h2>
            <EditToggle
              portalEl={this.portal}
              render={(editing) => {
              return (
                <React.Fragment>
                  {editing ? <ReadOnlyComponent /> : EditComponent }
                </React.Fragment>
              )
            }}
          />
        </div>
        <div ref={(ref)=> this.portal=ref}></div>
      </div>
    );
  }
}

export class EditToggle extends React.Component<Props> {
  constructor(props) {
    super(props);
  }

  state = {
    editing: false,
  };

  onToggle = () => {
    this.setState({
        editing: !this.state.editing,
    });
  }
  renderPortal(){
    if(this.props.portalEl){
        return ReactDom.createPortal(this.props.render(this.state.editing), this.props.portalEl)
    }
  }
  render() {
    return (
      <div>
        <a onClick={this.onToggle}></a>
        {this.renderPortal()}
      </div>
    );
  }
}