几天来,我一直在努力展示/隐藏ReactJs中的组件。我试图显示(“ Write(blocks)”-默认情况下需要从视图中隐藏),并在单击“ edit”链接时显示(同时切换“ Read”块的隐藏/显示)并隐藏它们当单击“保存”或“取消”按钮时,稍后我将处理保存功能。现在,我只是尝试基于此显示/隐藏组件。
下面是我的代码:
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。谢谢。
这就是我要使用的模式。
render() { var hideWriteBlock = (show hide logic); var hideReadBlock = (show hide logic); return ( <div className="ProfileSettings"> <SettingsBlock className="Names" label="Name" link="name" hide={hideWriteBlock}>
在设置组件中;
render() { if (this.props.hide) return null; return ( <div> {this.props.children} </div> ) }
我使用hide,所以我不必写if(!this.props.show)返回null;。