在ReactJs中切換顯示和隱藏組件

我一直在努力在ReactJs中顯示/隱藏組件幾天。我試圖顯示（「寫（塊）」 - 默認情況下需要從視圖中隱藏）並在單擊「編輯」鏈接時顯示（同時切換「讀取」塊的隱藏/顯示）並隱藏它們當點擊「保存」或「取消」按鈕時，我將在稍後處理保存功能。現在我只是試圖基於此顯示/隱藏組件。在ReactJs中切換顯示和隱藏組件

下面是我的代碼：

class ProfileSettings extends React.Component { 

    render() { 
    return (
     <div className="ProfileSettings"> 

     <SettingsBlock className="Names" label="Name" link="name"> 
      <p className="readOnlySettingField ReadNames">Hilal Agil<a href="#">Edit</a></p> 

      <div className="WriteNames"> 
      <SubBlock label="First Name" placeholder="First Name" /> 
      <SubBlock label="Middle Name" placeholder="Middle Name" /> 
      <SubBlock label="Last Name" placeholder="Last Name" /> 
      <p className="notice"><strong>Please note:</strong> You wont be able to change your name within the next 30 days. 
      Make sure not to add any unusual capitalization, punctuation, characters or random words.</p> 
      <button className="button small fill primary">Save Changes</button> 
      <button className="button small default">Cancel</button> 
      </div> 
     </SettingsBlock> 

     <SettingsBlock label="Username" link="username"> 

      <p className="readOnlySettingField ReadUsername">www.squelo.com/hilarl<a href="#">Edit</a></p> 

      <div className="WriteUsername"> 
      <p className="notice url">squelo.com/hilarl</p> 
      <Input placeholder="Username" classes="col-md-7" /> 
      <p className="notice"><strong>Please note:</strong> Your username can only be changed once and should include your authentic name.</p> 
      <button className="button small fill primary">Save Changes</button> 
      <button className="button small default">Cancel</button> 
      </div> 
     </SettingsBlock> 

     <SettingsBlock label="Email" link="email"> 
      <p className="readOnlySettingField ReadEmail">[email protected]<a href="#">Edit</a></p> 

      <div className="WriteEmail"> 
      <Input placeholder="Email" classes="col-md-9" /> 
      <p className="notice"><strong>Please note:</strong> Your username can only be changed once and should include your authentic name.</p> 
      <button className="button small fill primary">Save Changes</button> 
      <button className="button small default">Cancel</button> 
      </div> 
     </SettingsBlock> 

     <SettingsBlock className="Password" label="Password" link="password"> 
      <p className="readOnlySettingField ReadPassword">Password last changed over a year ago<a href="#">Edit</a></p> 

      <div className="WritePassword"> 
      <SubBlock label="Current" placeholder="Current" /> 
      <SubBlock label="New" placeholder="New" /> 
      <SubBlock label="Re-type new" placeholder="Re-type new" /> 
      <p className="notice"><a href="#">Forgot password?</a></p> 
      <button className="button small fill primary">Save Changes</button> 
      <button className="button small default">Cancel</button> 
      </div> 
     </SettingsBlock> 
     </div> 
    ); 
    } 

}

將是巨大的，如果有人能給出如何在這種情況下，實現這樣的一個例子。我一直在浪費大量的時間來解決這個問題，這是我第一次在一個項目中使用ReactJs。謝謝。

來源

2015-09-02 hilarl

這是我會使用的模式。

render() { 
     var hideWriteBlock = (show hide logic); 
     var hideReadBlock = (show hide logic); 
     return (
      <div className="ProfileSettings"> 

       <SettingsBlock className="Names" label="Name" link="name" hide={hideWriteBlock}>

在settings組件中;

render() { 
     if (this.props.hide) return null; 
     return (
      <div> 
       {this.props.children} 
      </div> 
     ) 
    }

我使用隱藏，這樣我就不用寫if（！this.props.show）返回null ;.

來源

2015-09-02 19:07:28

在ReactJs中切換顯示和隱藏組件

回答

相關問題