react基础学习小demo汇总_react demo大全-优快云博客

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>react demo</title>

    <script src="./build/react.js" charset="utf-8"></script>
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script>

    <style>
      .pstyle{
        font-size:20px;
      }
    </style>

  </head>
  <body>
    <div id="container">

    </div>
  </body>

  <script type="text/babel">
/*-----------------------------------------------------------------------------*/
/*传递props，父组件传递给子组件*/
    var HelloMessage = React.createClass({
      render: function(){
        return <h1>{this.props.helloText}</h1>;
      }
    });
/*-----------------------------------------------------------------------------*/
/*
react中设置样式的三种形式
  1.行内样式，直接在标签中设置样式，style={{}}，用逗号隔开，并且使用驼峰命名法，右边的属性会覆盖左边的属性
  2.传入对象当做样式，用对象将样式包裹起来，style={}
  3.传统的class设置样式，class写作className
*/
    var hStyle = {
      titleStyle: {
        backgroundColor:"green",
        color:"red"
      }
    }

    var ShowMsg = React.createClass({
      render: function(){
        return(
          <div style={{backgroundColor:"yellow",border:"5px solid black"}}>
            <h1 style={hStyle.titleStyle}>{this.props.firstRow}</h1>
            <p className="pstyle">{this.props.secondRow}</p>
          </div>
        )
      }
    });
/*-----------------------------------------------------------------------------*/
/*复合组件*/
    var WebName = React.createClass({
      render: function(){
        return <h1>{this.props.webname}</h1>
      }
    });

    var WebLink = React.createClass({
      render: function(){
        return <a href={this.props.weblink}>{this.props.weblink}</a>
      }
    });

    var WebShow = React.createClass({
      render: function(){
        return(
          <div>
            //props中转站，原始值从ReactDOM.render传过来，再传给子组件
            <WebName webname={this.props.wname}/>
            <WebLink weblink={this.props.wlink}/>
          </div>
        )
      }
    });
/*-----------------------------------------------------------------------------*/
/*遍历子节点*/
/*
  ReactDOM.render(
    <ListComponent>
      <h1>hello</h1>
      <p>world</p>
    </ListComponent>,
    document.getElementById("container")
  );
  挂载时将会遍历出
  <li><h1>hello</h1></li>
  <li><p>world</p></li>
*/
    var ListComponent = React.createClass({
      render: function(){
        return(
          <ul>
            {
              React.Children.map(this.props.children, function(child){
                return <li>{child}</li>
              })
            }
          </ul>
        )
      }
    });
/*-----------------------------------------------------------------------------*/
/*props验证类型*/
    var ShowTitle = React.createClass({
      propTypes:{
        //title只能为字符串
        title: React.PropTypes.string.isRequired
      },
      render: function(){
        return <h1>{this.props.title}</h1>
      }
    })
/*-----------------------------------------------------------------------------*/
/*给props设置默认值，在挂载时可以省略传递的参数，例如title="xxx"可以省略*/
    var MyTitle = React.createClass({
      //默认值设置
      getDefaultProps:function(){
        return {
          title: "百度"
        };
      },
      render: function(){
        return <h1>{this.props.title}</h1>
      }
    })
/*-----------------------------------------------------------------------------*/
/*在react中绑定事件*/
    var MyButton = React.createClass({
      //任意命名事件函数
      handleClick :function(){
        alert("点击按钮触发的效果")
      },
      render: function(){
        return(
          <button onClick={this.handleClick}>{this.props.buttonTitle}</button>
        )
      }
    })
/*----------------------------------------------------------------------------*/
/*state的两个小demo*/
/* demo1：根据复选框的选中状态，改变文字*/
    var CheckButton = React.createClass({
      getInitialState: function(){
        // 设置默认状态，返回一个对象，在对象中设置的属性，将会存储在state当中
        //版本更新后应该在constructor中设置
        return {
          isCheck: false
        }
      },
      handleChange: function(){
        //修改状态值，通过this.state读取设置状态值
        this.setState({
          isCheck: !this.state.isCheck
        })
      },
      render: function(){
        //根据状态值，重新渲染render
        //在JSX语法中，render中不能直接使用if
        var text = this.state.isCheck ? "已选中" :"未选中";
        return (
          <div>
            <input type="checkbox" onChange={this.handleChange}/>{text}
          </div>
        )
      }
    })
/*demo2：在文本框中输入值，同步显示在p标签中*/
    var Input = React.createClass({
      getInitialState: function() {
        return {
          value: "请输入"
        }
      },
      handleChange: function(event){
        this.setState({
          //event.target.value获取用户输入的值
          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(
      <Input/>,
      document.getElementById("container")
    );
  </script>
</html>