点这里

React Style 是 React.js 可维护的样式组件。使用 React Native StyleSheet.create一样的样式。

完全使用 JavaScript 定义样式:

1
2
3
4
5
6
7
var StyleSheet = require('react-style')
var styles = StyleSheet.create({
    foo: {
      color: 'red',
      backgroundColor: 'white'
    }
})

样式 React 组件:

1
2
3
4
5
6
7
8
9
10
var React = require('react')
 
class HelloWorld extends React.Component{
 
  render() {
    var dynamicStyles = {color: this.props.color}
    return <div styles={[styles.foo, dynamicStyles]}>Hello, world!</div>
  }
 
}

https://github.com/js-next/react-style

React.js 样式组件:React Style的更多相关文章

  1. react.js table组件【可以直接使用】

    最近在做一个CMS,使用的技术是刚刚学习的react.js,准备制作一个查询的页面以及一个新增的页面. 这是table的公共组件: 我们在使用的过程中,只会用到: 制作出来的查询页面: 新增页面: 上 ...

  2. React Js之组件(Component)与state

    React Js组件: 组件(Component)是为了更好的维护我们的应用,可以在不影响其他的组件的情况下更新或者更改组件. state:是标记数据的来源,我们使state比较简单和单一,如果我们有 ...

  3. react.js父子组件通信

    这里通过todolist的功能来说明 父组件: import React,{ Component,Fragment } from 'react'; import TodoItem from './To ...

  4. react.js 父子组件数据绑定实时通讯

    import React,{Component} from 'react' import ReactDOM from 'react-dom' class ChildCounter extends Co ...

  5. React.js 小书 Lesson23 - dangerouslySetHTML 和 style 属性

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson23 转载请注明出处,保留原文链接和作者信息. 这一节我们来补充两个之前没有提到的属性,但是在 ...

  6. 移动web端的react.js组件化方案

     背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...

  7. React.js 小书 Lesson24 - PropTypes 和组件参数验证

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...

  8. React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...

  9. React.js - 入门

    React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...

随机推荐

  1. C开发 中原子性操作 , 除了快什么都不剩下了

    题外话 今天,听歌曲听到一首缅怀迈克尔·杰克逊的歌曲 如下: http://music.163.com/#/song?id=1696048  Breaking News 每次听迈克尔 音乐,特别有战斗 ...

  2. myeclipse激活+Aptana安装配置

    一.Myeclipse安装激活. 安装过程一路向下. 1.破解公钥,确保MyEclipse没有开启,否则失败! 用WinRAR或7-zip打开安装目录下Common\plugins\com.genui ...

  3. 教你怎么安装Redis

    以下命令以root用户运行:#cd /tmp/#wget http://redis.googlecode.com/files/redis-2.6.11.tar.gz#tar xzf redis-2.6 ...

  4. 初识MVC,MVC里面的基本数据传递

          MVC是一种表现形式,他将Web应用程序分成三个组件即:视图(View)控制器(Controller)模型(Model). M:Model 主要是存储或者是处理数据的组件 V:View 是 ...

  5. RTLviewer与TechnologyMapViewer的区别?

    区别: 1.QUARTUS II 中往往要查看RTL Viewer,其实RTLview是编译后的结果,显示的图形都是调用标准单元的结果,这是和思维有关联的显示结果,跟工艺库,FPGA类型,都没有关系: ...

  6. HTML统一资源定位器

    w3c 更好的解释 在OSGi in action中安装bundle时要加文本传输协议,要不然shell判断不出来

  7. 【Recover Binary Search Tree】cpp

    题目: Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without chan ...

  8. 【转】GCC编译使用动态链接库

    相关gcc参数:-l -L -shared -fPIC -static -c -o   原文地址:[脚本之家]http://www.jb51.net/article/34990.htm     根据链 ...

  9. submit和button的区别

    两者主要区别在于:submit可以提交表单(form),而button如果不指定onclick等事件处理函数,它是不做任何事情的.注意哦,在页面上<input type="submit ...

  10. JS 学习笔记--7---正则表达式

    正则表达式中的内容很多,也很深,下面只是一些基本的知识点,练习中使用的浏览器是IE10,若有不当处请各位朋友指正,我会在第一时间修改错误之处. 匹配的概念:是包含的意思,不是相等的意思 1.正则表达式 ...