切换在ReactJs中显示和隐藏组件 [英] Toggle showing and hiding components in ReactJs

问题描述

我一直在努力在ReactJs中显示/隐藏组件几天。我试图显示（写入（块） - 默认情况下需要从视图中隐藏）并在单击编辑链接时显示（同时切换读取块的隐藏/显示）并隐藏它们当点击保存或取消按钮时，我将在稍后处理保存功能。现在我只想基于此显示/隐藏组件。

I have been struggling to show/hide components in ReactJs for a couple of days. I am trying to show the ("Write(blocks)" - which needs to be hidden from view by default) and shown when the "edit" links are clicked (while toggling hide / show for the "Read" blocks) and hide them when either the "save" or "cancel" buttons are clicked, I will be taking care of the save function later. For now I am just trying to show / hide the component based on this.

以下是我的代码：

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">[e-mail]<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。谢谢。

Would be great if somebody could give an example for how to achieve this in this situation. I have been wasting a lot of time figuring this out myself and this is the first time I am using ReactJs in a project. Thanks.

推荐答案

这是我要使用的模式。

    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;。

I use hide so that I don't have to write if (!this.props.show) return null;.

这篇关于切换在ReactJs中显示和隐藏组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！