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

随机推荐

LIS 最长递增子序列问题
一, 最长递增子序列问题的描述设L=<a1,a2,…,an>是n个不同的实数的序列,L的递增子序列是这样一个子序列Lin=<aK1,ak2,…,akm>,其中k1< ...
oracle中sys和System的默认密码
sys:change_on_install system:oracle 如果用pl/sql登录的话,记得在下面用户权限选项选择sysdba,如图所示:
COFF/PE文件结构
COFF/PE文件结构原创 C++应用程序在Windows下的编译.链接(二)COFF/PE文件结构 2.1概述在windows操作系统下,可执行文件的存储格式是PE格式:在Linux操作系统下, ...
分享一套 CodeSmit 代码生成模板。
分享一套 CodeSmit 代码生成模板. 住博客园 5 年了,以前也发过一些博文,但都在一天后 / 几周后 / 几年后将它删了:因为感觉代码写得不好:不清晰或侵入太大,哪怕只有一句侵入. 可是最 ...
MFC控件(8):command button与syslink control
在VS 2008里MFC多了4种控件,分别是 split buttons ,command button , syslink controls和 network address controls. s ...
Python中BeautifulSoup中对HTML标签的提取
一开始使用了beautifulSoup的get_text()进行字符串的提取,后来一直提取失败,并提示错误为TypeError: 'NoneType' object is not callable 返 ...
InvocationHandler中invoke()方法的调用问题
转InvocationHandler中invoke()方法的调用问题 Java中动态代理的实现,关键就是这两个东西:Proxy.InvocationHandler,下面从InvocationHandl ...
服务器如何防ssh服务暴力破解？？
如图: 当我们遭到暴力破解ssh服务该怎么办内行看门道外行看热闹下面教大家几招办法: 1 密码足够的复杂,密码的长度要大于8位最好大于20位.密码的复杂度是密码要尽可能有数字.大小写字母和特 ...
AxeSlide软件项目梳理
先介绍一下我负责的软件项目 AxeSlide斧子演示,估计大部分人没有听说过,但国外有一款叫Prezi的软件,应该有一部分人使用过. 这是我们产品的官网http://www.axeslide.com/ ...
【翻译】Asp.net Core介绍
ASP.NET Core is a significant redesign of ASP.NET. This topic introduces the new concepts in ASP.NET ...

react 学习与使用记录

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

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

随机推荐

热门专题