第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將反應(yīng)組件移動到另一個父級

將反應(yīng)組件移動到另一個父級

九州編程 2021-09-04 14:57:39
我目前正在 React 中創(chuàng)建一個國際象棋游戲以用于學(xué)習(xí)目的。我遇到的是將 React 組件從一個父級移動到另一個父級,同時保留道具。我已經(jīng)閱讀了 ReactDOM.createPortal(),但我似乎無法讓它工作。為了說明這個問題,我創(chuàng)建了一個帶有兩個容器的簡單 React 應(yīng)用程序,其中一個容器中有一個按鈕。目標是在單擊按鈕時將按鈕移動到另一個容器。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>    );  }}在這個例子中,簡單的解決方案是調(diào)用 ParentRight 組件中的一個函數(shù),并使用 setState() 在其中渲染一個 Button 組件。這不是我正在尋找的解決方案。在我的棋局中,我不知道需要移動什么樣的 React 組件。
查看完整描述

2 回答

?
明月笑刀無情

TA貢獻1828條經(jīng)驗 獲得超4個贊

我的建議是重新考慮你的程序流程。通常,沒有上下文和/或 redux 或其他狀態(tài)管理器的幫助,您不會看到不相關(guān)的組件相互交談。通過不相關(guān)的組件,我們可以將它們定義為那些不共享相對接近的共同祖先的組件,例如,使用狀態(tài)控制其 props.children 的包裝組件。


雖然我相信你可以用 Portals 實現(xiàn)你想要的結(jié)果,但它們通常用于渲染模態(tài)和類似的組件,如對話框、消息等。


考慮到這些事實,遵循 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 現(xiàn)在負責改變按鈕的位置,它也作為 ParentLeft 和 ParentRight 之間交換通信的橋梁。它的方法 changeButtonPosition 只是切換布爾值 buttonAtLeft,它可以在 MainWrapper 的狀態(tài)中找到。


隨后,我們根據(jù) state.buttonAtLeft 進行條件渲染,將按鈕渲染到其合適的位置。


查看完整回答
反對 回復(fù) 2021-09-04
?
開心每一天1111

TA貢獻1836條經(jīng)驗 獲得超13個贊

命名的頂級組件container必須具有定義圖形及其位置的所有狀態(tài)。讓它成為Bridge組件:


class Bridge = () => {

  const figures = useState()

  const squares = useState()

  render board.each(square =>

    <Square figure={figure[square]}>

  )

}

創(chuàng)建組件Square:


class Square = ({figure}) => {

  render (

    <Figure figure={figure}>

  )

}

創(chuàng)建組件Figure:


class Figure = ({figure}) => {

  render switch(figure) {

    case 'king': return <King/>

    case 'queen': return <Quieen/>

    default: return null

  )

}

所以現(xiàn)在如果你需要方形按鈕,只有當方形有圖形時,你可以像這樣制作方形:


class Square = ({figure}) => {

  render (`

    <React.Fragment>

      <Figure figure={figure}>

      {figure ? <Button> : null}

    </React.Fragment>

  )

}

對您的ParenLeft和使用相同的方法ParentRight?;蛘邉?chuàng)建通用Parent組件。并像這樣使用它<Paren left/>或<Paren right/>。請參閱Figure如何使用條件。


您不能使用ReactDOM.createPortal()將某些東西從反應(yīng)樹的一個地方渲染到另一個地方 - 因為門戶是另一個額外的反應(yīng)樹。要將某些東西從一個反應(yīng)位置渲染到另一個反應(yīng)位置,您需要通過反應(yīng)


查看完整回答
反對 回復(fù) 2021-09-04
  • 2 回答
  • 0 關(guān)注
  • 242 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號