zoukankan html css js c++ java

React入门2

最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 react-tools 包来预编译你的代码。

如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。

如果需要在手机或平板等触摸设备上使用 React，需要调用 React.initializeTouchEvents(true); 启用触摸事件处理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>遇到 HTML 标签（以 &lt; 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析</p>
    <p>添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字</p>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
    <div id="example4"></div>
    <div id="example5"></div>
    <div id="example6"></div>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx">
        var names = ['Alice', 'Emily', 'Kate'];

        React.render(
          <div>
          {
            names.map(function (name) {
              return <div>Hello, {name}!</div>
            })
          }
          </div>,
          document.getElementById('example1')
        );

        var myDivElement = <div className="foo" />;
        React.render(myDivElement, document.getElementById('example2'));

        var MyComponent = React.createClass({
            render: function() {
                return (
                    <div className="commentBox">{this.props.name}</div>
                )
            },
            componentDidMount: function() {
                console.log(this.props.someProperty)
            }
        });
        var myElement = <MyComponent name="John" someProperty={true} />;
        React.render(myElement, document.getElementById('example3'));

        var NotesList = React.createClass({
          render: function() {
            return (
              <ol>
              {
                this.props.children.map(function (child) {
                  return <li>{child}</li>
                })
              }
              </ol>
            );
          }
        });

        // 这里需要注意，只有当子节点多余1个时，this.props.children 才是一个数组，否则是不能用 map 方法的， 会报错。
        React.render(
          <NotesList>
            <span>hello</span>
            <span>world</span>
          </NotesList>,
          document.getElementById('example4')
        );


        var MyTitle = React.createClass({
            getDefaultProps : function () {
                return {
                  title : 'Hello World'
                };
            },

          // PropTypes 告诉 React，这个 title 属性是必须的，而且它的值必须是字符串
          propTypes: {
            title: React.PropTypes.string.isRequired,
          },

          render: function() {
             return <h1> {this.props.title} </h1>;
           }
        });

        var data = '123';

        React.render(
          <MyTitle title={data} />,
          document.getElementById('example5')
        );

        var MyComponent = React.createClass({
          handleClick: function() {
            React.findDOMNode(this.refs.myTextInput).focus();
          },
          render: function() {
            return (
              <div>
                <input type="text" ref="myTextInput" />
                <input type="button" value="Focus the text input" onClick={this.handleClick} />
              </div>
            );
          }
        });

        React.render(
          <MyComponent />,
          document.getElementById('example6')
        );
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx">
        var GroceryList = React.createClass({
          handleClick: function(i) {
            alert('You clicked: ' + this.props.items[i]);
          },

          render: function() {
            return (
              <div>
                {this.props.items.map(function(item, i) {
                  return (
                    <div onClick={this.handleClick.bind(this, i)} key={i}>{item}</div>
                  );
                }, this)}
              </div>
            );
          }
        });

        React.render(
          <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, document.getElementById('example1')
        );

        var Box = React.createClass({
          getInitialState: function() {
            return {windowWidth: window.innerWidth};
          },

          handleResize: function(e) {
            this.setState({windowWidth: window.innerWidth});
          },

          componentDidMount: function() {
            window.addEventListener('resize', this.handleResize);
          },

          componentWillUnmount: function() {
            window.removeEventListener('resize', this.handleResize);
          },

          render: function() {
            return <div>Current window  {this.state.windowWidth}</div>;
          }
        });

        React.render(<Box />, document.getElementById('example2'));

        function createMarkup() { return {__html: '<script>alert(2);</script><b>22</b>First &middot; Second'}; };
        React.render(<div dangerouslySetInnerHTML={createMarkup()} />, document.getElementById('example3'));
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
    <script src="react.js"></script>
    <script src="JSXTransformer.js"></script>
    <script type="text/jsx">
        React.render(<input value="hi" />, document.getElementById('example1'));

        React.render(<input value={null} />, document.getElementById('example2'));

        var mountNode = document.getElementById('example3') 

        var Todo = React.createClass({
          render: function() {
            return <div onClick={this.props.onClick}>{this.props.title}</div>;
          },

          //this component will be accessed by the parent through the `ref` attribute
          animate: function() {
            console.log('Pretend %s is animating', this.props.title);
          }
        });

        var Todos = React.createClass({
          getInitialState: function() {
            return {items: ['Apple', 'Banana', 'Cranberry']};
          },

          handleClick: function(index) {
            var items = this.state.items.filter(function(item, i) {
              return index !== i;
            });
            this.setState({items: items}, function() {
              if (items.length === 1) {
                this.refs.item0.animate();
              }
            }.bind(this));
          },

          render: function() {
            return (
              <div>
                {this.state.items.map(function(item, i) {
                  var boundClick = this.handleClick.bind(this, i);
                  return (
                    <Todo onClick={boundClick} key={i} title={item} ref={'item' + i} />
                  );
                }, this)}
              </div>
            );
          }
        });

        React.render(<Todos />, mountNode);
    </script>
</body>
</html>

查看全文

相关阅读:
用Jdbc连接数据库后实现增删改查功能
 jdbc连接数据库
 聚合函数和分组查询
 数据库MySQL
commons工具类 FilenameUtils FileUtils
打印流(PrintWriter ）
一次性认识终端命令
 JSON数据展示神器:react-json-view(常用于后台网站)
table固定列的宽度,超出部分用…代替(针对普通table和antd)
git项目,VSCode显示不同颜色块的含义

原文地址：https://www.cnblogs.com/jzm17173/p/4861731.html