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>

查看全文

相关阅读:
LeetCode Subsets II
LeetCode Rotate Image
LeetCode Palidrome Number
LeetCode Generate Parentheses
LeetCode Maximum Subarray
LeetCode Set Matrix Zeroes
LeetCode Remove Nth Node From End of List
Linux Loop设备使用
 Linux 文件系统大小调整
 LeetCode N-Queens II

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