如何使用wp媒体上传自由的反应组件？

Question

我正在使用创建-反应-应用程序来编写一个反应插件的wordpress。我想添加一个按钮在插件管理设置页面上传图像。我跟踪这位医生，但什么也没有呈现。

https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/media-upload

我的代码：

...
import { Button } from '@wordpress/components';
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';

const ALLOWED_MEDIA_TYPES = [ 'image' ];

const MyMediaUploader = () => {
    return (
        <MediaUploadCheck>
            <MediaUpload
                onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
                allowedTypes={ ALLOWED_MEDIA_TYPES }
                value=""
                render={ ( { open } ) => (
                    <Button onClick={ open }>
                        Open Media Library
                    </Button>
                ) }
            />
        </MediaUploadCheck>
    );
}

export default function settingsPage(){
    return(
        <MyMediaUploader/> 
    )
}

Answer 1

这是我的解决办法

import React, { useState, useEffect } from 'react'
import _ from 'lodash'
export default function FeaturedImage(props) {
_.noConflict()
let frame
const runUploader = (event) => {
    event.preventDefault()

    // If the media frame already exists, reopen it.
    if (frame) {
        frame.open()
        return
    }

    // Create a new media frame
    frame = wp.media({
        title: 'Select or Upload Media Of Your Chosen Persuasion',
        button: {
            text: 'Use this media',
        },
        multiple: false, // Set to true to allow multiple files to be selected
    })

    // Finally, open the modal on click
    frame.open()
}
return (
    <React.Fragment>
        <button type='button' onClick={runUploader}>
            Open Uploader
        </button>
    </React.Fragment>
)

}