@aliretail/react-materials-components/demo/PowerEditor/useMaterial.md

B 端物料组件库

---
title: 使用物料库上传资源
order: 3
---

# 使用物料库上传资源
但是由于接口跨域，无法模拟，请直接看代码

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { PowerEditor } from '@aliretail/react-materials-components';
import { Button, Dialog } from '@alifd/next';

class SingImg extends Component {
  state = {
    value: '',
    path: 'https://oneapi.alibaba-inc.com/mock/aliretail_materials/power-editor-path',
    code: 'mall_portal',
  };

  onChange(value) {
    console.log(`value值变更为：${value}`);
    this.setState({
      value
    })
  }

  render() {
    const {code, path} = this.state;

    return (
      <>
        <div>
          <PowerEditor
            path={path}
            onChange={this.onChange.bind(this)}
            materialCode={code}
            multiSelect={false}
            materialCenterLinkage={{
              app: 'retailforce_crm',
              page: 'member-MediaMaterials'
            }}
          />
        </div>
        <Button onClick={() => {this.setState({
          code: code + '_'
        })}}>修改code</Button>
      </>
    );
  }
}

class MultiImg extends Component {
  state = {
    value: '',
    path: 'https://oneapi.alibaba-inc.com/mock/aliretail_materials/power-editor-path',
    code: 'mall_portal',
  };

  onChange(value) {
    console.log(`value值变更为：${value}`);
    this.setState({
      value
    })
  }

  render() {
    const {code, path} = this.state;

    return (
      <>
        <div>
          <PowerEditor
            path={path}
            onChange={this.onChange.bind(this)}
            materialCode={code}
          />
        </div>
      </>
    );
  }
}

ReactDOM.render((
  <div>
    <h1>素材中心图片使用</h1>
    <SingImg />
    <hr />
    <h1>素材中心多图使用</h1>
    <MultiImg />
  </div>
), mountNode);
````