关于react-router中props传递的问题

-----1.className 有多个的时候

　　（1）用拼接字符串的方法

　　　　<div className={value.class + " " + value.class2}>{value.value}</div>

　　　（2）用字符串模板也行

　　　　<div className={`${value.class} ${value.class2}`}>{value.value}</div>

　　　　　　花括号里面就是可以运算的部分啊

　　（3）如果是数组的话直接join也行啊

　　　　<div className={classnames.join(" ")}>{value.value}</div>

举例：<div className={`header ${className || ''}`}>

------------------------------------------------------------

阮一峰 react教程

1.demo1---3 练习

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

  <!-- 不能少逗号，render里不能加分号 -->

  <!-- ReactDOM.render（）用于将模板转为 HTML 语言，并插入指定的 DOM 节点。 -->

    <div id="example"></div>

     <div id="aa"></div>

      <div id="bb">

        <!-- 如果这个变量是一个数组，则会展开这个数组的所有成员 注意：字符串要加'',数字不用-->

      </div>

    <script type="text/babel">

      var names = ['Alice', 'Emily', 'Kate'];

      ReactDOM.render(

        <div>

        {

          names.map(function (name) {

            return <div>Hello, {name}!</div>

          })

        }

        </div>,

        document.getElementById('example')

      );

      var ages=['12','45','67','90'];

      ReactDOM.render(

      <div>

        {

        ages.map(function (age){

        return <div>age:,{age}!</div>

        })

        }

      </div>,

      document.getElementById('aa')

      );

var myArray= [

        '12222ggg',

        '3455555ggg',

        '455444ggg'

      ];

var myArrayNum= [

    12222,

    3455555,

    455444

  ];

var myArrayHtml= [

  <h1>1245444</h1>,

  <h2>2222222</h2>,

  <h3>56898</h3>

];

ReactDOM.render(

<div>

 {myArray}

 {myArrayNum}

{myArrayHtml}

</div>,

document.getElementById('bb')

);

    </script>

  </body>

</html>

2.demo4--5 练习

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example">

      <!-- React.createClass 方法就用于生成一个组件类.

          组件类只能包含一个顶层标签，否则也会报错。

       -->

    </div>

    <div id="bb">

      <!-- this.props.children 属性。它表示组件的所有子节点 -->

      <!--  React.Children.map() 注意大小写 -->

      <!--  ReactDOM.render() 必须分情况写，不能都写到一个render里 -->

    </div>

    <script type="text/babel">

      var HelloMessage = React.createClass({

      render: function(){

        return <h3>hello {this.props.name} <a>age:{this.props.age}</a></h3>

      }

      });

      var MoreChilds = React.createClass({

      render:function(){

        return (

        <ul>

          {

          React.Children.map(this.props.children,function(child){

              return <li>{child}</li>

          })

          }

        </ul>

        );

      }

      })

      ReactDOM.render(

      <HelloMessage name="20161206test" age="13"></HelloMessage>,

      document.getElementById('example')

      );

      ReactDOM.render(

      <MoreChilds>

        <span>morechild1</span>,

         <span>morechild2</span>

      </MoreChilds>,

      document.getElementById('bb')

      );

    </script>

  </body>

</html>

3.demo6 练习

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example">

            <!-- 组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求 -->

    </div>

    <div id="aa">

      <!-- data_12变量直接输出 -->

    </div>

     <div id="bb">

      <!-- 虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 -->

    </div>

    <script type="text/babel">

      var data = 123;

      var MyTitle = React.createClass({

        propTypes: {

          title: React.PropTypes.string.isRequired,

        },

        render: function() {

          return <h1> {this.props.title} </h1>;

        }

      });

      ReactDOM.render(

        <MyTitle title={data} />,

        document.getElementById('example')

      );

      var data_11 = 12456;

      var MyTitle_11 = React.createClass({

          propTypes:{

          title: React.PropTypes.string.isRequired,

          },

          handleClick:function(){

              this.refs.myTextInput.focus();

          },

          render:function(){

            return (

            <div>

              <h3>{this.props.title}</h3>

              <input type="text" ref="myTextInput" />

              <input type="button" value="Focus the text input" onClick={this.handleClick} />

            </div>

            )

          }

      });

      ReactDOM.render(

        <MyTitle_11 title={data_11} />,

        document.getElementById('bb')

      )

      var data_12 = 'test123';

      ReactDOM.render(

            <h2>{data_12}</h2>,

            document.getElementById('aa')

      )

    </script>

  </body>

</html>

4.demo8 练习

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

     <div id="bb">

       <!-- getInitialState 获得初始默认状态；this.setState 方法就修改状态值 -->

       <!-- onClick={this.handleClick}  点击调用操作函数handleClick -->

       <!-- 区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。 -->

     </div>

    <script type="text/babel">

var LikeButton11 = React.createClass({

  getInitialState: function(){

  return {liked:false};

  },

  handleClick:function(){

    this.setState({liked: !this.state.liked});

    console.log("yyyyyy");

  },

  render: function(){

    var text= this.state.liked ? 'like' : 'nononononno';

    return (

    <p onClick={this.handleClick}>

      你 {text} 点击了切换

    </p>

    );

  }

});

ReactDOM.render(

<LikeButton11 />,

document.getElementById('bb')

);

    </script>

  </body>

</html>

5.demo9 练习

<!DOCTYPE html>

<html>

  <head>

    <script src="../build/react.js"></script>

    <script src="../build/react-dom.js"></script>

    <script src="../build/browser.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <div id="aa">

      <!-- ，文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况 -->

      <!-- function(event) {   //event 不能忘加

            this.setState({value: event.target.value}); //设置值

             var value = this.state.value;  //勿忘定义

          } -->

    </div>

    <script type="text/babel">

        var Input11 = React.createClass({

          getInitialState:function(){

            return {value:'hello111!'};

          },

          handleChange:function(event) {

            this.setState({value: event.target.value});

          },

          render:function(){

            var value = this.state.value;

            return (

              <div>

                <input type="text" value={value} onChange={this.handleChange} />

                <p>{value}</p>

              </div>

            );

          }

        });

    ReactDOM.render(<Input11/>,document.getElementById('aa'));

    </script>

  </body>

</html>

react 学习与使用记录的更多相关文章

业余学习react 学习记录
http://www.ruanyifeng.com/blog/2015/03/react (阮一峰 react 学习) 1.搭建环境:npm 使用 React npm install -g cnpm ...
React学习笔记。
有段时间没写博客了,最近这段时间有点说不出的苦,虽然说年轻的时候该多出去经历些事,但每次找工作东跑西跑,坐公交坐地铁浪费了我太多时间,我感觉到这是一种浪费,对生命的浪费.所以很想尽快找到一份工作,去努 ...
【JAVASCRIPT】React学习- 杂七杂八
摘要记录 React 学习中的小细节 setState setState 有一定的时间延迟,如果需要保证 setState 之后执行某些动作,可以采用以下方法 this.setState({ vis ...
React学习（4）——向服务器请求数据并显示
本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...
React 学习笔记：1-react 入门
接下来的项目里有用到react,最近一段时间主要关注于react 的学习.大部门都是网上的资料,学习整理并记录,加深记忆. React 是Facebook推出的用来构建用户界面的JavaScript库 ...
AntDesign(React)学习-1 创建环境
目录: AntDesign(React)学习-15 组件定义.connect.interface AntDesign(React)学习-14 使用UMI提供的antd模板 AntDesign(Reac ...
React学习笔记-1-什么是react，react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)
react学习小结本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之 ...
React学习资料
以下是我整理的React学习资料,包括:React基础.Redux.reat-router, redux middleware, higher order components, React验证等, ...

随机推荐

XP系统安装ArcGIS10.0需要修改的一个配置
1,右击我的电脑,查看属性. 2,选择“高级”选项卡,“启动和故障恢复”单击“设置”. 3,在“默认操作系统”中单击“编辑”: 4,在弹出的boot.ini文档中把操作系统改成相应的操作系统, ...
【Lotus Notes】邮件获取
public class LotusManager { public static int bodyMaxLength, length; public static List<Entity.Lo ...
jQuery easyui刷新当前tabs
更新特定的选项卡面板可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current ...
linux学习心得之vim/Cvim篇
linux学习心得之vim/Cvim篇在linux 下,vim 时一种最常见的编辑器,很多linux的发行版就自带了.我的是CentOS 6.3. 基本上Vim共分为3种模式,分别是一般模式,编辑模 ...
easyui tree 的数据格式转换
一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点): var serverList = [ {id : 2,pid ...
C++应用程序在Windows下的编译、链接（一）概述
C++应用程序在Windows下的编译.链接(一)概述本文是对C++应用程序在Windows下的编译.链接的深入理解和分析,文章的目录如下: 我们先看第一章概述部分. 1概述 1.1编译工具简介 c ...
C#实现eval
C#实现eval 进行四则运算(有码) 在JavaScript中实现四则运算很简单,只需要调用eval函数就行了,但是不知道什么原因万能的.NET却没有封装这个函数~ 在这里为大家封装了一个C#版 ...
用indexOf获取字符窜某个字符的所有位置
indexOf方法可以传两个参数,第二个参数是传位置的参数,利用这点获取所有的位置.例如: var str = "hello world,welcome!"; var arr = ...
HQL练习
Hive学习笔记总结 05. Hql练习 1. hql基础练习题目和数据来源:http://www.w2b-c.com/article/150326(去掉-) create和load create ...
Mybatis原理图
Mybatis原理图 MyBatis 是一个基于Java的持久层框架.它提供的持久层框架包括SQL Maps和Data Access Objects(DAO). MyBatis 是支持普通 SQL查询 ...

react 学习与使用记录

关于react-router中props传递的问题

react 学习与使用记录的更多相关文章

随机推荐

热门专题