将反应组件移动到另一个父级

Question

我目前正在 React 中创建一个国际象棋游戏以用于学习目的。我遇到的是将 React 组件从一个父级移动到另一个父级，同时保留道具。我已经阅读了 ReactDOM.createPortal()，但我似乎无法让它工作。为了说明这个问题，我创建了一个带有两个容器的简单 React 应用程序，其中一个容器中有一个按钮。目标是在单击按钮时将按钮移动到另一个容器。export default class ParentLeft extends React.Component{  render(){    return(      <div className="container">        <Button />      </div>    );  }}export default class ParentRight extends React.Component{  render(){    return(      <div className="container"></div>    );  }}在这个例子中，简单的解决方案是调用 ParentRight 组件中的一个函数，并使用 setState() 在其中渲染一个 Button 组件。这不是我正在寻找的解决方案。在我的棋局中，我不知道需要移动什么样的 React 组件。

Answer 1

我的建议是重新考虑你的程序流程。通常，没有上下文和/或 redux 或其他状态管理器的帮助，您不会看到不相关的组件相互交谈。通过不相关的组件，我们可以将它们定义为那些不共享相对接近的共同祖先的组件，例如，使用状态控制其 props.children 的包装组件。

虽然我相信你可以用 Portals 实现你想要的结果，但它们通常用于渲染模态和类似的组件，如对话框、消息等。

考虑到这些事实，遵循 Facebook 建议的自上而下流程的推荐方法是：

export default class MainWrapper extends React.Component {

  state = {

    buttonAtLeft: true,

  }

  changeButtonPosition = () => {

    this.setState({ buttonAtLeft: !this.state.buttonAtLeft });

  }

  render() {

    const { buttonAtLeft } = this.state;

    return (

      <div>

        <ParentLeft>

          {

            buttonAtLeft

              ? <Button onClick={this.changeButtonPosition} />

              : undefined

          }

        </ParentLeft>

        <ParentRight>

          {

            buttonAtLeft

              ? undefined

              : <Button onClick={this.changeButtonPosition} />

          }

        </ParentRight>

      </div>

    );

  }

}

只需记住更新 ParentRight/Left 组件，让它们在其渲染方法上渲染 props.children：

render() {

  return (

    <div className="container">

      {this.props.children}

    </div>

  )

}

解释：

MainWrapper 现在负责改变按钮的位置，它也作为 ParentLeft 和 ParentRight 之间交换通信的桥梁。它的方法 changeButtonPosition 只是切换布尔值 buttonAtLeft，它可以在 MainWrapper 的状态中找到。

随后，我们根据 state.buttonAtLeft 进行条件渲染，将按钮渲染到其合适的位置。

Answer 2

命名的顶级组件container必须具有定义图形及其位置的所有状态。让它成为Bridge组件：

class Bridge = () => {

  const figures = useState()

  const squares = useState()

  render board.each(square =>

    <Square figure={figure[square]}>

  )

}

创建组件Square：

class Square = ({figure}) => {

  render (

    <Figure figure={figure}>

  )

}

创建组件Figure：

class Figure = ({figure}) => {

  render switch(figure) {

    case 'king': return <King/>

    case 'queen': return <Quieen/>

    default: return null

  )

}

所以现在如果你需要方形按钮，只有当方形有图形时，你可以像这样制作方形：

class Square = ({figure}) => {

  render (`

    <React.Fragment>

      <Figure figure={figure}>

      {figure ? <Button> : null}

    </React.Fragment>

  )

}

对您的ParenLeft和使用相同的方法ParentRight。或者创建通用Parent组件。并像这样使用它<Paren left/>或<Paren right/>。请参阅Figure如何使用条件。

您不能使用ReactDOM.createPortal()将某些东西从反应树的一个地方渲染到另一个地方 - 因为门户是另一个额外的反应树。要将某些东西从一个反应位置渲染到另一个反应位置，您需要通过反应