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/

posted @ 2017-03-30 16:42 blue星空阅读(528) 评论(0) 编辑收藏举报

刷新页面返回顶部

blue星空

ReactJS入门：展示数据

公告