• React 渲染组件


    function UserGreeting(props) {
      return <h1>欢迎回来!</h1>;
    }
    ---------------------------------------------------------------------------
    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>
        );
    }
    ---------------------------------------------------------------------------
    function Mailbox(props) {
      const unreadMessages = props.unreadMessages;
      return (
        <div>
          <h1>Hello!</h1>
          {unreadMessages.length > 0 &&
            <h2>
              您有 {unreadMessages.length} 条未读信息。
            </h2>
          }
        </div>
      );
    }
     
    const messages = ['React', 'Re: React', 'Re:Re: React'];
    ReactDOM.render(
      <Mailbox unreadMessages={messages} />,
    );
    ---------------------------------------------------------------------------
    render() {
      const isLoggedIn = this.state.isLoggedIn;
      return (
        <div>
          {isLoggedIn ? (
            <LogoutButton onClick={this.handleLogoutClick} />
          ) : (
            <LoginButton onClick={this.handleLoginClick} />
          )}
        </div>
      );
    }
    
    

      

    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((numbers) =>
      <li>{numbers}</li>
    );
     
    ReactDOM.render(
      <ul>{listItems}</ul>
    );
    

      

  • 相关阅读:
    查看数据库所有的表
    oracle JOB学习(一)---基础
    图片实时预览JSP加js
    Collections.sort()
    FileUtil.java
    设计模式:常见类的关系
    枚举
    相册
    jQuery----blur()方法
    上传文件详解
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12925861.html
Copyright © 2020-2023  润新知