react 组件引用组件_Cloudinary React组件

左手的ㄟ右手 2023-02-21 14:27 2阅读 0赞

react 组件引用组件

![Ringo][]

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的滤镜][Instagram-Like Filters] ， [转换图像][transform images]等。 Cloudinary提供了适用于多种不同语言(Node.js，Python，PHP等)的API，但它们又走了一步，现在提供了一[组][set of React components]可在您的React应用程序中使用[的React组件][set of React components] ！

## 安装`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`组件是最简单的组件，可以进行所有类型的转换：

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

The code above transpiles to:

上面的代码转换为：

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`组件也非常简单，可以按照您认为的方式工作：

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`组件以修改传出图像：

<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][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_s Transformation documentation]是出色的转换广度的绝佳参考。 如果对如何将转换作为属性添加有任何疑问，请单击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`组件：

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`组件：

## 创建一个快速的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 React][]

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

> 翻译自: [https://davidwalsh.name/cloudinary-react][https_davidwalsh.name_cloudinary-react]

react 组件引用组件

[Ringo]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9yaW5nby1jYXJ0b29uLmpwZWc?x-oss-process=image/format,png
[React]: https://davidwalsh.name/tutorials/react
[Cloudinary]: http://cloudinary.com/?utm_source=DWB&utm_medium=Sponsored_Post_12&utm_content=React
[Instagram-Like Filters]: https://davidwalsh.name/cloudinary-filters
[transform images]: https://davidwalsh.name/cloudinary-named-transformations
[set of React components]: https://github.com/cloudinary/cloudinary-react
[Cloudinary_s Transformation documentation]: http://cloudinary.com/documentation/image_transformations?utm_source=DWB&utm_medium=Sponsored_Post_12&utm_content=React
[Cloudinary React]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9DbG91ZGluYXJ5UmVhY3QucG5n?x-oss-process=image/format,png
[Cloudinary 1]: https://cloudinary.com/users/register/free?utm_source=DWB&utm_medium=Sponsored_Post_12&utm_content=React
[https_davidwalsh.name_cloudinary-react]: https://davidwalsh.name/cloudinary-react