关于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验证等, ...

随机推荐

Bootstrap3.0（进度条、媒体对象、列表组、面板）
Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehy ...
Android简单发送邮件（可带附件）
项目中遇到了一个发送邮件的功能,在网上查了很多,资料也很多.这里就不一一介绍了,只是写出我使用的方案(最简单的) Intent email = new Intent(android.content.I ...
Cassandra
NoSQL之Cassandra 9月初听了一个讲座,演讲者是张月同学,他给我们分享了Cassandra nosql数据库,讲得很精彩,听完之后收益良多. Cassandra是一个noSQL数据库, ...
ecexl操作
/// <summary> /// 写入ecexl /// </summary> /// <param name="dt"></param ...
IceMx.Mvc 我的js MVC 框架开篇
开篇这篇文章是后补的,前端时间想写一些对于js开发的一些理解,就直接写了,后来发现很唐突,所以今天在这里补一个开篇. 我的js Mvc 框架基于实用设计,过分设计等于没设计.本着简单的原则,它只实 ...
MSSQL Server查询优化方法(转)
核心提示:查询速度慢的原因很多,常见如下几种查询速度慢的原因很多,常见如下几种: 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了瓶颈效应. 3. ...
openbr on linuxmint13/ubuntu12.04/debian7 x64 facial recognition [Compile from source!!!]
Openbr is a great project for facial detecting. System: linuxmint 13 x86_64 Face recognition, motio ...
linux 网络编程：客户端与服务器通过TCP协议相互通信 + UDP
1.TCP编程的客户端一般步骤: 1.创建一个socket,用函数socket(): 2.设置socket属性,用函数setsockopt():* 可选: 3.绑定IP地址.端口等信息到socket上 ...
【转】简单十步让你全面理解SQL
简单十步让你全面理解SQL 很多程序员认为SQL是一头难以驯服的野兽.它是为数不多的声明性语言之一,也因为这样,其展示了完全不同于其他的表现形式.命令式语言. 面向对象语言甚至函数式编程语言(虽然有些 ...
JS高程5.引用类型（5）Array类型的操作方法
一.操作方法 1.concat()方法基于当前数组中的所有项创建一个新数组.具体说,是先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组.在没有给concat() ...

react 学习与使用记录

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

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

随机推荐

热门专题