当前位置：首页 > 软件库 > Web应用开发 > 常用JavaScript包 >

react-statements

小巧可嵌套的 React 语句控制组件

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、常用JavaScript包

软件类型开源软件

地区国产

投递者郏兴贤

操作系统跨平台

开源组织无

适用人群未知

软件概览

react-statements是一个很小的React语句控制组件，更漂亮的条件渲染方法。

安装

npm i --save react-statements
yarn add react-statements

栗子

import { If } from 'react-statements'class Example extends React.Component {
  constructor(props) {
    super(props);    this.state = {logic: true};
  }
  render() {    return (      <div>
        <If when={this.state.logic}>
          <p>我是一些组件内容</p>
        </If>
      </div>
    );
  }
}

文档说明

If 组件

If组件可以使用一个when属性来控制组件是否渲染

<If when={condition}>
  <p>when在转为bool为true的条件下显示这个组件</p>
</If>

<If when={condition} children={<p>使用方法同上，单标签方法中使用</p>} />

Switch 组件

Switch组件可以根据指定的值渲染不同的组件

Switch组件内部使用Case组件对不同的值进行判断

Switch组件内部同时可以使用Default来设置一个默认显示组件

<Switch value={value}>
  <Case when={condition}>
    <p>condition 1</p>
  </Case>
  <Case when={condition}>
    <p>condition 2</p>
  </Case>
  <Case when='c' children={<p>condition 3</p>}/>
  <Default children={<p>默认组件</p>}/>
</Switch>

For

For组件可以对Array、Object遍历生成一组组件

For组件内部也可以使用Default来显示默认组件

<For of={['a', 'b', 'c']}>
  {(item, index) => (<p key={index}>{index}：{item}</p>)}  <Default>默认组件</Default></For>

使用案例

jsx-control-statements - jsx的一大利器

一、为什么如此难受? 在我们去写 JSX 的时候，有时候一直在感叹为什么在 JSX 里面写不了条件语句，举个栗子?（为什么都举我）： render () { return ( <div> { if(true) { <span>渲染我</span>
react-router v3学习笔记

最近接手了一个简单的项目，需要修改一些逻辑，时间也比较充裕，正好适合我这个小白边学边做。其中涉及了一些知识点，包括redux和router。所以今天先开始学习阮一峰大神的react router教程看完这篇文章之后才知道react-router v4和v3有很大区别。在v4里面主要引用react-router-dom获得组件。一、基本用法： import { Router, Route, ha
create-react-app之测试

1.运行测试 Create React App使用Jest作为其测试运行器。为进行此集成做准备，我们对Jest进行了重大改进，因此，如果几年前您听到有关Jest的坏消息，请尝试一下。 Jest是基于Node的运行器。这意味着测试始终在Node环境中运行，而不是在实际的浏览器中运行。这使我们能够实现快速的迭代速度并防止松散。虽然Jest提供了浏览器全局如window和jsdom，他们是只有
react-router的基础知识

一、基本用法 React Router 安装命令如下。 $ npm install -S react-router 使用时，路由器Router就是React的一个组件。 import { Router } from 'react-router'; render(<Router/>, document.getElementById('app')); Router组件本身只是一个容器，真正的路由
探索React----第一章：ReactRouterV2基础

ReactRouter(V2)基础 1.路由路由就是Router，这里的路由并不是我们在计算机网路中所学的路由的概念，而是前端的‘路由’，简单的来说就是通过URL的变化，使用路由来跳转到相对应的路径来显示不一样的页面，虽然只是这么一个小功能，但是它却是web应用中一个非常非常非常重要的一步。一个只会写页面的前端工程师不是工程师，顶多就是个工人，工程师的目标就是去架构，去优化，去理解，去运用。所以
React Router 使用教程(阮一峰)

真正学会 React 是一个漫长的过程。你会发现，它不是一个库，也不是一个框架，而是一个庞大的体系。想要发挥它的威力，整个技术栈都要配合它改造。你要学习一整套解决方案，从后端到前端，都是全新的做法。举例来说，React 不使用 HTML，而使用 JSX 。它打算抛弃 DOM，要求开发者不要使用任何 DOM 方法。它甚至还抛弃了 SQL ，自己发明了一套查询语言 GraphQL 。当然，这些你都
react-native 学习二 JavaScript和node学习篇

node安装： sudo apt install nodejs 数据类型： 1.Number（数字） 2.String（字符串） 3.Boolean（布尔） 4.Symbol（符号） 5.Object（对象） Function（函数） Array（数组） Date（日期） RegExp（正则表达式） 6.null（空） 7.undefined（未定义） JavaScript 还有一种内置的 Er
react-router路由配置

react-router是一个基于react的路由库，它可以让你向应用中快速的添加视图和数据流,同时保持页面与URL之间的同步。路由配置 1. 不使用React-Router的情形 import React from 'react' import {render} from 'react-dom' const About = React.createClass({...}) const Inb

react-statements

安装

栗子

文档说明

If 组件

Switch 组件

For

同类工具

相关阅读

相关文章

相关问答

相关文档