React文档:条件渲染

在React中,可以创建不同的组件来封装各种需要的行为,还可以根据应用的状态变化只渲染其中一部分。
使用 if 或条件运算符来创建表示当前状态的元素,然后让React根据他们来更新UI。

Example:
无状态组件:

function UserGreeting(props){
  return <h1>Welcome back !</h1>;
}
function GuestGreeting(props){
  return <h1>Please sign up.</h1>;
}

//登录组件
function LoginButton(props) {
  return(
    <button onClick={props.onClick}>Login</button>
  );
}
//注销组件
function LogoutButton(props) {
  return(
    <button onClick={props.onClick}>Logout</button>
  );
}

创建一个 Greeting 组件,根据用户是否登录来显示其中之一:

function Greeting(props){
  const isLoggedIn = props.isLoggedIn ;
  if(isLoggedIn ){
      return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  <Greeting isLoggedIn ={false} />,
document.getElementById('root')
);

创建一个名为 LoginControl 的有状态组件:
它会根据当前的状态来渲染<LoginButton />或<LogoutButton />, 它也将渲染前面例子中的<Greeting />.

class LoginControl extends React.Component {
    constructor(props){
        super(props);
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state={
            isLoggedIn: false
        };

    }
    handleLoginClick(){
        this.setState({isLoggedIn: true});
    }
    handleLogoutClick(){
        this.setState({isLoggedIn: false});
    }

    render(){
        const isLoggedIn = this.state.isLoggedIn;

        let button = null;
        if(isLoggedIn){
            button = <LogoutButton onClick={this.handleLogoutClick} />;
        }else{
            button = <LoginButton onClick={this.handleLoginClick} />;
        }

        return(
            <div>
                <Greeting isLoggedIn ={isLoggedIn} />
                {button}
            </div>
        );
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);
阻止组件渲染

在极少数的情况下,可能希望隐藏组件,及时它被其他组件渲染。让render方法返回null而不是它的渲染结果即可实现。

<WarningBanner />根据属性warn的值条件渲染,
如果warn的值是false,则组件不会渲染:

if (!props.warn) {
return null;
}

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = {showWarning: true}
    this.handleToggleClick = this.handleToggleClick.bind(this);
  }

  handleToggleClick() {
    this.setState(prevState => ({
      showWarning: !prevState.showWarning
    }));
  }

  render() {
    return (
      <div>
        <WarningBanner warn={this.state.showWarning} />
        <button onClick={this.handleToggleClick}>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 条件渲染 在 React 中,你可以创建一个囊括所有你需要行为的特定的组件。然后,你可以根据你的应用的 state...
    soojade阅读 3,933评论 0 0
  • HTML模版 之后出现的React代码嵌套入模版中。 1. Hello world 这段代码将一个一级标题插入到指...
    ryanho84阅读 6,315评论 0 9
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,896评论 0 24
  • 本笔记基于React官方文档,当前React版本号为15.4.0。 1. 安装 1.1 尝试 开始之前可以先去co...
    Awey阅读 7,815评论 14 128
  • 狼的重要性,姜戎一直不厌其烦甚至有些啰嗦的强调,为了论证自己的观点,多次引入史实资料。不知道其他人是否也和我...
    若有人兮山之阿阅读 392评论 0 3