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

随机推荐

RDLC（Reportview）报表直接打印，支持所有浏览器，客户可在linux下浏览使用
最近在做一个打印清单的,但是rdlc报表自带的工具栏中的打印按钮只有在ie内核下的浏览器才可以使用(其他的就会隐藏),这导致了使用火狐和谷歌浏览器还有使用linux系统的客户打印成了问题,于是就自己 ...
[转]gdb 调试 objc
源:http://bbs.pediy.com/showthread.php?t=159549 3. 在没有 symbols的情况下,想要下断 objc method 或者 private framew ...
Linux环境进程间通信(二):信号(下)
linux下进程间通信的几种主要手段: 管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功能外,它还允 ...
js漫谈
不久前在武汉这边找到了自己的第一份软件方面工作,当时还很欢喜,可惜最后因为家里的事情,公司的情况等等,最近又成了待业状态,正好安静的考虑一下以后怎么走,是考研还是继续找工作,非计算机专业学生自学找软件 ...
springMVC3学习(十一)--文件上传CommonsMultipartFile
使用springMVC提供的CommonsMultipartFile类进行读取文件需要用到上传文件的两个jar包 commons-logging.jar.commons-io-xxx.jar 1.在 ...
java中除去字符串(String)中的换行字符(\r \n)
有时在文本框中输入内容特别是粘贴内容时会出现一些换行符(\r\n),如下,在做字数验证或保存到数据库中时应过滤掉. str.replaceAll("\r|\n","&qu ...
Javascript 封装问题
Javascript 封装问题为什么会用这样一个题目呢,这是要说封装的什么问题,本文并不讲高深的封装理论,只是解决一个小问题. 问题来源今天在百度知道上闲逛,遇到一个网友的问题,问题如下,问题的地 ...
windows下配置PHP+Nginx+MySQL完整流程(转)
对于在windows上的php+nginx的配置可能好多同学一次根本都配不正确,于我也是如此,为此我将我成功配置的过程细致的总结如下,希望能帮助搞PHP研究的同学 1.资源准备 MySQL:这个链接不 ...
this关键字、访问修饰符、super关键字
this关键字.访问修饰符.super关键字 Java关键字this只能用于方法方法体内,而且只能用在非静态方法内.当一个对象创建后,Java虚拟机(JVM)就会给这个对象分配一个引用自身的指针,这个 ...
分享一个自己写的MVC+EF “增删改查” 无刷新分页程序
分享一个自己写的MVC+EF “增删改查” 无刷新分页程序一.项目之前得添加几个组件artDialog.MVCPager.kindeditor-4.0.先上几个效果图. 1.首先建立一个数 ...

react 学习与使用记录

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

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

随机推荐

热门专题