react 组件引用组件

react 组件引用组件

I've been experimenting a lot with both React and Cloudinary over the past six months and it's been a blast -- I'm learning a ton while also recovering the ambition and thirst I had as a young developer.  React has been a revelation:  an advanced JavaScript framework that doesn't overcomplicate things and has encouraged me to learn more ESNext and Babel.  Cloudinary lets me do amazing stuff with images and media, like creating Instagram-Like Filters, transform images, and more, all by modifying the image URL.  Cloudinary provides APIs for a number of different languages (Node.js, Python, PHP, etc.) but they've gone a step further and now offer a set of React components to use in your React app!

在过去的六个月中，我一直在对React和Cloudinary进行大量试验，这是一个爆炸式的发展-我学到了很多东西，同时还恢复了年轻开发者的野心和渴望。 React一直是一个启示：一个高级JavaScript框架，不会使事情复杂化，并鼓励我学习更多ESNext和Babel。 Cloudinary让我可以通过修改图像URL对图像和媒体进行出色的处理，例如创建类似Instagram的滤镜 ， 转换图像等。 Cloudinary提供了适用于多种不同语言(Node.js，Python，PHP等)的API，但它们又走了一步，现在提供了一组可在您的React应用程序中使用的React组件 ！

安装cloudinary-react (Installing cloudinary-react)

Cloudinary's React component set is available via the cloudinary-react name:

Cloudinary的React组件集可通过cloudinary-react名称获得：

yarn add cloudinary-react # or `npm install cloudinary-react`

Use npm install or yarn add to get these components.

使用npm install或yarn add获得这些组件。

云端组件 (Cloudinary Components)

Cloudinary provides CloudinaryContext, Image, Video, and Transformation components.  They are available within your app using require or import:

Cloudinary提供CloudinaryContext ， Image ， Video和Transformation组件。 它们可以在您的应用程序中使用require或import来使用：

import { Image, Video, Transformation, CloudinaryContext } from 'cloudinary-react';

Let's have a look at each component type!

让我们看一下每种组件类型！

图片 (Image)

The Image component is the simplest of components, allowing all types of transformations:

Image组件是最简单的组件，可以进行所有类型的转换：

<!-- basic usage --> <Image cloudName="david-wash-blog" publicId="ringo" width="600" crop="scale" alt="Ringo" /> <!-- with a simple effect --> <Image publicId="ringo" effect="cartoonify:25:50" />

The code above transpiles to:

上面的代码转换为：

<img alt="Ringo" width="600" src="http://res.cloudinary.com/david-wash-blog/image/upload/c_scale,w_600/ringo">

Note that you can add all of the usual attributes for each image, like alt, title, and so on.

请注意，您可以为每个图像添加所有常用属性，例如alt ， title等。

视频 (Video)

The Video component is also very simple, working as you think it would:

Video组件也非常简单，可以按照您认为的方式工作：

<Video cloudName="david-wash-blog" publicId="sample-video" width="800" controls />

All transformations can also be applied to videos as well!

所有转换也可以应用于视频！

转型 (Transformation)

Image components can contain any number of Transformation components to modify the outgoing image:

Image组件可以包含任意数量的Transformation组件以修改传出图像：

<!-- Rotate and trim the image, then add text --> <Image cloudName="david-wash-blog" publicId="ringo"> <Transformation angle="-45"/> <Transformation effect="trim" angle="45" crop="scale" width="600"> <Transformation overlay="text:Arial_100:Hello" /> </Transformation> </Image>

Cloudinary's Transformation documentation is an excellent reference for the amazing breadth of transformations.  If you have any question about how the transformation should be added as an attribute, click the Node.js tab in the Cloudinary documentation examples to see what your keys and values should be.

Cloudinary的Transformation文档是出色的转换广度的绝佳参考。 如果对如何将转换作为属性添加有任何疑问，请单击Cloudinary文档示例中的Node.js选项卡以查看键和值应为什么。

云上下文 (Cloudinary Context)

The CloudinaryContext component allows for intelligent grouping of media and effects to be applied to its child content, be it Image, Video, Transformation components:

CloudinaryContext组件允许将媒体和效果的智能分组应用于其子内容，包括Image ， Video ， Transformation组件：

<CloudinaryContext cloudName="david-wash-blog" effect="art:aurora" width="300"> <Image publicId="ringo"></Image> <Image publicId="coffee"></Image> <!-- ... --> </CloudinaryContext>

With the example above, all Image components have the effect designated by its parent CloudinaryContext, an awesome way to cut down on repeated code and keep your JSX tight and organized! You can even stack CloudinaryContext components:

在上面的示例中，所有Image组件均具有其父级CloudinaryContext指定的效果，这是一种减少重复代码并保持JSX紧凑有序的好方法！ 您甚至可以堆叠CloudinaryContext组件：

<CloudinaryContext cloudName="david-wash-blog"> <Image publicId="ringo" /> <Image publicId="coffee" /> <CloudinaryContext fetchFormat="auto" quality="auto"> <Image publicId="ringo" /> <Image publicId="coffee" /> </CloudinaryContext> </CloudinaryContext>

创建一个快速的Instagram风格的实验 (Creating a Quick Instagram-style Experiment)

One of the reasons I love React (and more specifically create-react-app) is that it lets me put together a dynamic app really quickly.  Since Cloudinary provides a few dozen artistic filters, I thought it would be fun to create a very simple Instagram-like app using the Cloudinary's React library.  Then minutes later I had something:

我喜欢React的原因之一(更具体地说是create-react-app )是因为它可以让我真正快速地组合一个动态应用程序。 由于Cloudinary提供了数十种艺术滤镜，我认为使用Cloudinary的React库创建一个非常简单的类似Instagram的应用程序会很有趣。 几分钟后，我有了一些东西：

class App extends Component { state = { width: 600, filter: null }; filters = [ 'al_dente', 'audrey', 'aurora', 'daguerre', 'eucalyptus', 'fes', 'frost', 'hairspray', 'hokusai', 'incognito', 'linen', 'peacock', 'primavera', 'quartz', 'red_rock', 'refresh', 'sizzle', 'sonnet', 'ukulele', 'zorro' ]; onPreviewClick(event) { this.setState({ filter: event.target.src }); } render() { return ( <div> <CloudinaryContext cloudName="david-wash-blog"> <div className="wrapper"> <div className="left"> <Image publicId="ringo" width="{this.state.width}"> { this.state.filter && (<Transformation effect={`art:${this.state.filter}`} />) } </Image> </div> <div className="right"> {this.filters.map(filter => ( <div className="preview" key={filter}> <Image publicId="ringo" width="{this.state.width}" onClick={this.onPreviewClick}> <Transformation effect={`art:${filter}`} /> </Image> <span>{filter}</span> </div> ))} </div> </div> </CloudinaryContext> </div> ); } }

The result looks like:

结果如下：

Cloudinary provides APIs and helpers for every major programming language and now provides jQuery and React library resources to make coding your media-rich applications with ease.  Especially useful are the Transformation and CloudinaryContext components which allow your code to stay clean and brief.  cloudinary-react is just another awesome reason to look to Cloudinary for all of your media needs!

Cloudinary为每种主要的编程语言提供API和帮助器，现在提供jQuery和React库资源，使您可以轻松地编写富含媒体的应用程序的代码。 Transformation和CloudinaryContext组件特别有用，它可使您的代码保持简洁CloudinaryContext 。 cloudinary-react只是将Cloudinary满足您所有媒体需求的另一个绝佳原因！

翻译自: https://davidwalsh.name/cloudinary-react

react 组件引用组件