【全栈React】第5天: 数据驱动_ES2015(es6)

上一篇: webpack学习笔记（1）-模块化下一篇:React Native与Native之间通信

【全栈React】第5天: 数据驱动

发布时间：2019-08-12 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了【全栈React】第5天: 数据驱动，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3821
原文：https://www.fullstackreact.com/30-days-of-react/day-5/
我们的应用程序中的硬编码数据不是好主意。 今天，我们将把我们的组件设置为由数据驱动，访问外部数据。
通过这一点，我们已经编写了我们的第一个组件并将其设置为子/父关系。但是，我们还没有将任何数据绑定到我们的React组件。虽然在React中写一个网站是一个更愉快的体验（在我们看来），我们还没有利用React的力量来显示任何动态数据。
今天我们来改一下。
数据驱动
回想一下，昨天我们构建了包含头和活动列表的时间轴组件的开始：
我们将演示分解成组件，最终用静态JSX模板构建了三个独立的组件。每当我们改变网站的数据时，不得不更新我们组件的模板是不方便的。
而是让我们给出要使用的组件数据进行显示。我们从 <Header /> 组件开始吧。现在，<Header />组件只显示元素的标题 Timeline。这是一个很好的元素，它将是很好的能够重用它在我们的页面的其他部分，但标题是 Timeline 没有意义的每一次使用。
让我们告诉React，我们希望能够将标题设置为别的东西。
介绍属性
React允许我们以与HTML相同的语法向组件发送数据，使用组件上的特性或 属性。这类似于将 src 属性传递给图像标签。我们可以考虑 <img /> 标签的属性，因为PRop我们正在设置调用的组件img。
我们可以访问组件内的这些属性 this.props。让我们看看在动作中使用 props。
回想一下，我们将 <Header /> 组件定义为：

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="class Header extends React.component {
  render() {
    return (
      
        
          
          
          
        

        
          {this.props.tITle}
        

        

        
      
    )
  }
}
" title="" data-original-title="复制">
      
      
class Header extends React.Component {
  render() {
    return (
      <div classname="header">
        <div className="menuIcon">
          <div className="dashTop"></div>
          <div className="dashBottom"></div>
          <div className="circle"></div>
        </div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className="seArchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

当我们使用该 <Header /> 组件时，我们将它放在我们的 <App /> 组件中：

      
      
      button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
" title="" data-original-title="复制">
      
      
<Header />

我们可以 title 作为一个属性传递我们作为一个属性，<Header /> 通过更新组件的使用设置调用 title 某个字符串的属性，如下所示：

      
      
      
      
      
<Header title="Timeline" />

在我们的组件内部，我们可以 title 从课程中的 this.props 属性访问 Header。而不是像 Timeline 模板一样静态设置标题，我们可以将其替换为传入的属性。

      
      
      import React From 'react'

class Header extends React.COMponent {
  render() {
    return (
      
        
          
          
          
        

        
          {this.props.title}
        

        

        
      
    )
  }
}

export default Header
" title="" data-original-title="复制">
      
      
import React from 'react'

class Header extends React.Component {
  render() {
    return (
      <div className="header">
        <div className="menuIcon">
          <div className="dashTop"></div>
          <div className="dashBottom"></div>
          <div className="circle"></div>
        </div>

        <span className="title">
          {this.props.title}
        </span>

        <input
          type="text"
          className="searchInput"
          placeholder="Search ..." />

        <div className="fa fa-search searchIcon"></div>
      </div>
    )
  }
}

export default Header

现在我们的 <Header /> 组件将显示我们传入的字符串，title 当我们调用该组件时。例如，<Header /> 像这样调用我们的组件四次：

      
      
      
      
      
<Header title="Timeline" />
<Header title="Profile" />
<Header title="Settings" />
<Header title="Chat" />

结果四个 <Header /> 组件加载完成后如下：
很漂亮，是吗？现在我们可以复用 <Header /> 组件, 使用一个动态 title 属性。
我们可以传递不仅仅是组件中的字符串。我们可以传递数字，字符串，各种对象，甚至功能！我们将进一步讨论如何定义这些不同的属性，以便稍后构建组件api。
我们来看内容组件，并用数据变量而不是而不是静态设置内容和日期。就像我们可以使用HTML组件一样，我们可以将多个 props 组件传递给组件。
回想一下，昨天我们定义了我们的 Content 容器，如下所示：

      
      
      return (
      
        

      {/* Timeline item */}
        
          
            
            Doug
          

          
            An hour ago
          
          Ate lunch
          
            2
          
        

        {/* ... */}

      
    )
  }
}
" title="" data-original-title="复制">
      
      
class Content extends React.Component {
  render() {
    return (
      <div className="content">
        <div className="line"></div>

      {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img src="http://p0.qhimg.com/t01e9226cd16ce24fb4.jpg" />
            Doug
          </div>

          <span className="time">
            An hour ago
          </span>
          <p>Ate lunch</p>
          <div className="commentCount">
            2
          </div>
        </div>

        {/* ... */}

      </div>
    )
  }
}

和我们 title 一样，我们来看看 props 我们的 Content 组件需求：

用户的头像图片
活动的时间戳
活动项的文字
评论数量

假设我们有一个代表活动项目的JavaScript对象。我们将有一些字段，如字符串字段（文本）和日期对象。我们可能会有一些嵌套的对象 user 和 comments。例如：

      
      
      
      
      
{
  timestamp: new Date().getTime(),
  text: "Ate lunch",
  user: {
    id: 1,
    name: 'Nate',
    avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
  },
  comments: [
    { from: 'Ari', text: 'Me too!' }
  ]
}

就像我们将一个字符串标题传递给 <Header /> 组件一样，我们可以把这个 activity 对象传递给 Content 组件。我们转换我们的组件来显示它的模板内的这个活动的细节。
为了将动态变量的值传递给一个模板，我们必须使用模板语法在我们的模板中呈现。例如：

      
      
      import React from 'react'

class Content extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      
        

        {/* Timeline item */}
        
          
            
            {activity.user.name}
          

          
            {activity.timestamp}
          
          {activity.text}
          
            {activity.comments.length}
          
        
      
    )
  }
}

export default Content
" title="" data-original-title="复制">
      
      
import React from 'react'

class Content extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        <div className="item">
          <div className="avatar">
            <img
              alt={activity.text}
              src={activity.user.avatar} />
            {activity.user.name}
          </div>

          <span className="time">
            {activity.timestamp}
          </span>
          <p>{activity.text}</p>
          <div className="commentCount">
            {activity.comments.length}
          </div>
        </div>
      </div>
    )
  }
}

export default Content

我们在我们的类定义中使用了一点ES6，在第一行定义就是这个render() 的解构函数。以下两行在功能上相当：

      
      
      
      
      
// these lines do the same thing
const activity = this.props.activity;
const {activity} = this.props; 
解构使我们能够以更短，更紧凑的方式节省打字和定义变量。
然后，我们可以通过传递一个对象作为支持而不是硬编码的字符串来_使用_这个新内容。例如：

      
      
      
      
      
<Content activity={moment1} />

太棒了，现在我们有一个由一个对象驱动的活动项。但是，您可能已经注意到，我们将不得不使用不同的注释实现这个多次。相反，我们可以将一组对象传递到组件中。
假设我们有一个包含多个活动项目的对象：

      
      
      
      
      
const activities = [
  {
    timestamp: new Date().getTime(),
    text: "Ate lunch",
    user: {
      id: 1, name: 'Nate',
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: 'Ari', text: 'Me too!' }]
  },
  {
    timestamp: new Date().getTime(),
    text: "Woke up early for a beautiful run",
    user: {
      id: 2, name: 'Ari',
      avatar: "http://www.croop.cl/UI/twitter/images/doug.jpg"
    },
    comments: [{ from: 'Nate', text: 'I am so jealous' }]
  },
]

我们可以 <Content /> 通过传递多个活动来重新阐述我们的使用，而不仅仅是一个：

      
      
      
      
      
<Content activities={activities} />

但是，如果我们刷新视图什么都不会出现！我们需要先更新我们的 Content 组件以接受多个活动。正如我们以前了解到的，JSX真的只是由浏览器执行的JavaScript。我们可以在JSX内容中执行JavaScript函数，因为它将像浏览器的JavaScript一样运行。
我们将我们的活动项目 JSX 移动 map 到我们将针对每个项目运行的项目中。

      
      
      const {activities} = this.props; // ES6 destructuring

    return (
      
        

        {/* Timeline item */}
        {activities.map((activity) => {
          return (
            
              
                
                {activity.user.name}
              

              
                {activity.timestamp}
              
              {activity.text}
              
                {activity.comments.length}
              
            
          );
        })}

      
    )
  }
}

export default Content
" title="" data-original-title="复制">
      
      
import React from 'react'

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        {activities.map((activity) => {
          return (
            <div className="item">
              <div className="avatar">
                <img
                  alt={activity.text}
                  src={activity.user.avatar} />
                {activity.user.name}
              </div>

              <span className="time">
                {activity.timestamp}
              </span>
              <p>{activity.text}</p>
              <div className="commentCount">
                {activity.comments.length}
              </div>
            </div>
          );
        })}

      </div>
    )
  }
}

export default Content

现在我们可以将任何数量的活动传递给我们的数组，Content 组件将处理它，但是如果我们现在离开组件，那么我们将有一个相对复杂的组件处理，包含和显示活动列表。像这样离开真的不是React的方式。
活动项
这里写一个组件包含显示单个活动项然后再建立一个复杂的 Content 组件是有意义的，我们可以移动责任。这也将使测试更容易，添加功能等
让我们更新我们的 Content 组件以显示组件列表 ActivityItem（我们将在下面创建）。

      
      
      const {activities} = this.props; // ES6 destructuring

    return (
      
        

        {/* Timeline item */}
        {activities.map((activity) => (
          
        ))}

      
    )
  }
}

export default Content
" title="" data-original-title="复制">
      
      
import React from 'react'

import ActivityItem from './ActivityItem';

class Content extends React.Component {
  render() {
    const {activities} = this.props; // ES6 destructuring

    return (
      <div className="content">
        <div className="line"></div>

        {/* Timeline item */}
        {activities.map((activity) => (
          <ActivityItem
            activity={activity} />
        ))}

      </div>
    )
  }
}

export default Content

这不仅仅是简单易懂，而且使得这两个组件的测试更容易。
使用我们新鲜的 Content 组件，让我们创建 ActivityItem 组件。由于我们已经为此创建了视图 ActivityItem，所以我们需要做的就是将它从我们 Content 组件的模板复制为自己的模块。

      
      
      const {activity} = this.props; // ES6 destructuring

    return (
      
        
          
          {activity.user.name}
        

        
          {activity.timestamp}
        
        {activity.text}
        
          {activity.comments.length}
        
      
    )
  }
}

export default ActivityItem
" title="" data-original-title="复制">
      
      
import React from 'react'

class ActivityItem extends React.Component {
  render() {
    const {activity} = this.props; // ES6 destructuring

    return (
      <div className="item">
        <div className="avatar">
          <img 
            alt={activity.text} 
            src={activity.user.avatar} />
          {activity.user.name}
        </div>

        <span className="time">
          {activity.timestamp}
        </span>
        <p>{activity.text}</p>
        <div className="commentCount">
          {activity.comments.length}
        </div>
      </div>
    )
  }
}

export default ActivityItem

本周，我们使用React props 概念更新了由数据驱动的组件。在下一节中，我们将介绍有状态的组件。

脚本宝典总结

以上是脚本宝典为你收集整理的【全栈React】第5天: 数据驱动全部内容，希望文章能够帮你解决【全栈React】第5天: 数据驱动所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：button button Class const const const Date default default div do es6 export export export extends for for HTML if image image images Import in in java JSX length name name new new post-format-gallery React return return return select text text this top top 数组数组

上一篇: webpack学习笔记（1）-模块化下一篇:React Native与Native之间通信

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程