首頁猿問將反應組件移動到另一個父級

將反應組件移動到另一個父級

JavaScript

九州編程 2021-09-04 14:57:39

我目前正在 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 組件。

查看完整描述

2 回答

明月笑刀無情

TA貢獻1828條經驗獲得超4個贊

我的建議是重新考慮你的程序流程。通常，沒有上下文和/或 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>

{

buttonAtLeft

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

: undefined

}

</ParentLeft>

{

buttonAtLeft

? undefined

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

}

</ParentRight>

</div>

);

}

只需記住更新 ParentRight/Left 組件，讓它們在其渲染方法上渲染 props.children：

render() {

return (

{this.props.children}

</div>

)

}

解釋：

MainWrapper 現在負責改變按鈕的位置，它也作為 ParentLeft 和 ParentRight 之間交換通信的橋梁。它的方法 changeButtonPosition 只是切換布爾值 buttonAtLeft，它可以在 MainWrapper 的狀態中找到。

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

反對回復 2021-09-04

開心每一天1111

TA貢獻1836條經驗獲得超13個贊

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

class Bridge = () => {

const figures = useState()

const squares = useState()

render board.each(square =>

)

}

創建組件Square：

class Square = ({figure}) => {

render (

)

}

創建組件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 ? <Button> : null}

</React.Fragment>

)

}

對您的ParenLeft和使用相同的方法ParentRight?；蛘邉摻ㄍㄓ肞arent組件。并像這樣使用它<Paren left/>或<Paren right/>。請參閱Figure如何使用條件。

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

反對回復 2021-09-04

2 回答
0 關注
234 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將反應組件移動到另一個父級

將反應組件移動到另一個父級

2 回答

添加回答