如何在ReactJS中有條件加載組件

這是來自ReactJS的新起步者。不易獲得易於掌握的資源促使我再次敲詐SO。問題是這個。我有一個React Component，即RegisterAccount，點擊後會拍攝另一個組件（彈出窗口），允許用戶填寫註冊帳戶所需的詳細信息。現在，一旦帳戶成功註冊，我想添加註冊帳戶作爲RegisterAccount下的另一個組件。我怎樣才能建立這種溝通？如何在ReactJS中有條件加載組件

//In RegisterAccount 
<addAccount/> //pop-up 
<accountAdded/> //if account added, then show this component

來源

2014-01-22 5122014009

要點是'

{isAccountAdded ? : }

' - 這只是JavaScript，所以你可以在你的組件的渲染方法中編碼任意邏輯。 – andreypopp

嗨@andreypopp，謝謝，但恐怕這不是我想要的。說RegisterAccount有一個圖標，當點擊時，必須彈出組件AddAccount，並且一旦註冊帳戶RegisterAccount必須知道註冊已發生（可能來自AddAccount），然後它應該有AccountAdded組件。每次單擊RegisterAccount上的圖標時都應重複此操作。如何設置此通信？ – 5122014009

如果我理解你的問題正確的話，你要更新狀態改變時（例如用戶創建一個帳戶），以顯示其組成部分，與國家由一個子組件被改變。這是一個顯示孩子 - >父母溝通的基本示例。在這種情況下，RegisterAccount組件是根組件。如果它是另一個組件的子組件，它也需要知道本例中使用的狀態，那麼狀態可能會更好地存儲在鏈上（並作爲道具傳遞）。

jsfiddle of this example

/** @jsx React.DOM */ 

var AddAccount = React.createClass({ 
    handleRegistration: function() { 
    this.props.updateAccount(true); 
    }, 
    render: function() { 
    return <a onClick={this.handleRegistration}>Create my account</a>; 
    } 
}); 

var AccountAdded = React.createClass({ 
    render: function() { 
    return <span>Account exists now</span>; 
    } 
}); 

var RegisterAccount = React.createClass({ 
    getInitialState: function() { 
    return { 
     hasAccount: false 
    }; 
    }, 
    updateAccountStatus: function(status) { 
    this.setState({ 
     hasAccount: status 
    }); 
    }, 
    render: function() { 
    return (
     <div> 
     {this.state.hasAccount ? <AccountAdded /> : <AddAccount updateAccount={this.updateAccountStatus} />} 
     </div> 
    ); 
    } 
}); 

React.renderComponent(<RegisterAccount />, document.body);

來源

2014-01-23 03:00:52

看起來像React.renderComponent（已過時適用於我的作品：ReactDOM.render（而不是 – mpaepper

@mpapper是，不推薦使用'React.renderComponent'，應該從'react-dom';'導入ReactDOM並使用'ReactDOM.render（，document.body）;'改爲 – totymedli

在你的渲染，你可以有你的標籤的變量，有條件顯示...有點像這樣的功能：

render: function(){ 
    var conditionalTag; 
    if(conditionalTag) <AccountAdded/> 

    return (
     <AddAccount/> 
     { conditionalTag } 
    ) 

}

conditionalTag將只有在被渲染變量有jsx在它

來源

2014-09-08 18:01:10 SamiZ

我是新來的React。我也在尋找如何。我看到這個article！它說，像初級講座

render : function() 
{ 
    return (
     <div> 
     { true && <AddAccount /> } 
     { false && <AccountAdded /> } 
     </div> 
    ); 
}

來源

2016-01-23 02:54:09

簡單而有效，不需要添加內聯樣式來有條件地隱藏組件，謝謝;） – yuva

這是一個很好的解決方案，儘管不是明顯的一個 – BHouwens

WOW！非常感謝你！ –

您還可以做以下，並根據物業條件返回true或false，可以呈現不。這只是一個例子，條件還不如來自法等等等等。：

export class MyClass extends React.Component{ 
    ... 
    render(){ 
      <div> 
       <img src='someSource' /> 
       {this.state.condition ? <MyElement /> : null} 
      </div> 
    } 
}

你還可以找到更詳細的信息here。

來源

2017-09-13 15:03:38

如何在ReactJS中有條件加載組件

回答

相關問題