zoukankan html css js c++ java

ReactJS入门：展示数据

　　由于公司开发需要，博主利用闲暇的时间对ReactJS的基础知识进行了一些粗浅的认识和了解。博主对ReactJS的学习主要来自官网（http://reactjs.cn/react/docs/thinking-in-react.html）。下面分享一下笔者在学习过程中的一些总结。

本节主要介绍React的模板，属性传递及拓展。

1.React 的模板，读者可以在“// To add your code here.”处添加自己的测试代码进行研究。在浏览器中打开http// localhost：8080/index.html 查看效果。

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    //导入相关JS文件
    <script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      // To add your code here.
    </script>
  </body>
</html>

其中，<div id="content"></div>是自定义HTML标签、组件插入显示的位置；

　　　 <script type="text/babel">的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

导入的JS文件：react.js是React的核心库，

react-dom.js提供与DOM相关的功能，

brower.min.js将JSX语法转换为JavaScript语法。

2.React 通过ReactDOM.render（）渲染HTML标签和React组件，React通过大小写区分本地的组件类和HTML标签

2.1 React 渲染HTML标签，变量名的首字母必须小写

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

注意：由于JSX是JavaScript，因此不要将类别和类型的标识符作为XML属性名称。相反，React DOM组件分别期望DOM属性名称，如className 和htmlFor。　

该代码的简单写法为：

ReactDOM.render(
    <div className="foo" >Hello React</div>,
    document.getElementById('content')
);

2.2 React 渲染React组件，变量名的首字母必须大写

var MyComponent = React.createClass({/*...*/});
ReactDOM.render(
　　<MyComponent />, document.getElementById('content')
);

　　React.createClass 方法就用于生成一个组件类。例子如下：

var HelloWorld = React.createClass({
  render: function() {
    return (//此处只允许返回一个顶层标签
      <p>Hello, <input type="text" placeholder="Your name here" />!</p>
    );
  }
});
ReactDom.render(
  <HelloWorld />,
  document.getElementById('content')
);

3.使用this.props获取组件属性/子类

注意：this.props.属性名 --> 返回属性值； this.props.children --> 返回子类元素。

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          author:{this.props.author}
        </h2>
        children:{this.props.children}
      </div>
    );
  }
});  
   
ReactDOM.render(
  <Comment author="wei.hu" >hello</Comment>,
  document.getElementById('content')
);

4.处理数据集合

注意：在数组或者迭代器中的每一个子类对象必须有唯一的一个key.

4.1.一般数组集合

var names =['Tom','Thomas','Alley']; 
ReactDOM.render(
  <div> 
    {
      names.map(function (name) {
         return <div key={name.toString()}>Hello, {name}!</div>
      })
    }
  </div>,
  document.getElementById('content')
);

2.Json集合

var data = [
  {id: 1, author: "Pete Hunt", text: "This is one comment"},
  {id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
var CommentBox = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(comment) {
      return (
        <div key={comment.id}>
          author={comment.author},
          text={comment.text}
        </div>
      );
    });
    return ( 
      <div className="commentBox">{commentNodes}</div>  
    ); 
  } 
}); 
ReactDOM.render(
  <CommentBox data={data} />,
  document.getElementById('content')
);

5.属性拓展

有时候，我们会遇到这样的情况。当我们创建组件时，无法确定设置哪些属性。而在后期使用时需要将某些属性添加到对象中。而有时候，我们需要修改对象的某些属性的值。具体实现如下：

5.1将属性添加到对象中

//前期：创建组件
var Component = React.createClass({
    render : function(){
              return (<div>Spread Attribute</div>);
        }
});
//后期：将属性添加到对象中
var props = {};
props.foo = 'x';
props.bar = 'y';
//将传入对象的属性复制到组件的props上
var component = <Component {...props} />;//将属性复制到组件中
console.log(component.props);//控制台输出：Object {foo: "x", bar: "y"}

5.2 修改对象中某些属性的值

//前期：创建属性
var Component = React.createClass({
    render : function(){
              return (<div>Spread Attribute</div>);
        }
});
var props = { foo: 'default' ,bar: 'bar'};//属性原有的值
//后期：修改部分属性的值
var component = <Component {...props} foo={'override'} />;
console.log(component.props);//Object {foo: "override", bar: "bar"}

5.3 转移属性的快捷方式：将CheckLink组件的属性复制到底层的HTML元素(<a>)

var CheckLink = React.createClass({
  render: function() {
    // This takes any props passed to CheckLink and copies them to <a>
    return <a {...this.props}>{this.props.children}</a>;
  }
});

ReactDOM.render(
  <CheckLink href="/checked.html">
    Click here!
  </CheckLink>,
  document.getElementById('content')
);

6.以JSON的形式输出this.props中的数据

var Component = React.createClass({
    render : function(){
              return (<div>{JSON.stringify(this.props)}</div>);
        }
});
var component = <Component foo='x' bar='y' />;
ReactDOM.render(
    component,document.getElementById('content')
);

未完，待续。

更多内容，请访问：http://www.cnblogs.com/BlueStarWei/

更多内容，请访问：http://www.cnblogs.com/BlueStarWei

查看全文

相关阅读:
什么样的代码称得上是好代码？
九年程序人生总结分享
 Docker入门第一课 --.Net Core 使用Docker全程记录
 阿里云 Windows Server 2012 r2 部署asp.net mvc网站平坑之旅
 Visual studio 2015 Community 安装过程中遇到问题的终极解决
 Activiti6.0 spring5 工作流引擎 java SSM流程审批项目框架
 java 进销存库存管理销售报表商户管理 springmvc SSM crm 项目
 Leetcode名企之路
 24. 两两交换链表中的节点
 21. 合并两个有序链表

原文地址：https://www.cnblogs.com/BlueStarWei/p/6646807.html