我正在尝试创建一个界面，允许用户管理与他们相关的帖子中存储的数据，而不允许他们访问存储该数据的自定义帖子类型。

其他一切都很好，但我想添加一种方法，让他们从这个页面上传一张在React应用程序中显示的个人资料图片。所有其他元素的加载都很好，比如TextControl和SelectControl等。然而，我很难让MediaUpload在块编辑器之外激活。

有没有什么方法可以让我在我的react应用程序中使用它，以便他们可以上传个人资料图片？

下面是一些代码：

import React, { Component } from \'react\'
import ReactDOM from \'react-dom\'
import ReactPhoneInput from \'react-phone-input-2\'

let { Button, SelectControl, TextControl, ToggleControl } = window.wp.components
let { MediaUpload, RichText } = window.wp.editor

class ClassmateProfile extends Component {
  constructor (props) {
    super(props)
    this.state = {
      pageID: USNA1978.pageID,
      aboutDetails: USNA1978.aboutDetails,
      aboutImage1: USNA1978.aboutImage1,
      aboutImage2: USNA1978.aboutImage2,
      firstName: USNA1978.firstName,
      middleName: USNA1978.middleName,
      lastName: USNA1978.lastName,
      //...
    }
  }

  render () {
    if (this.state.pageID) {
      return (
        <div className=\'profile-layout\'>
          <div className=\'left-side\'>
            <div className=\'panel panel-default\'>
              <div className=\'panel-heading\'>
                <strong>About</strong>
              </div>
              <div className=\'panel-body\'>
                <div className=\'image-grid\'>
                  <div>
                    {(() => {
                      if (this.state.aboutImage1) {
                        return <img alt=\'Current Photo\' src={this.state.aboutImage1} />
                      } else {
                        return <span>Graduation Photo</span>
                      }
                    })()}
                  </div>
                  <div>
                    {(() => {
                      if (this.state.aboutImage2) {
                        return <img alt=\'Current Photo\' src={this.state.aboutImage2} />
                      } else {
                        return <span>Graduation Photo</span>
                      }
                    })()}
                    <MediaUpload
                      value={this.state.aboutImage2}
                      onSelect={media => this.setState({ aboutImage2: media.url })}
                      render={({ open }) => (
                        <Button className=\'button button-large sidebar-detail-icon-button\' onClick={open}>
                          {!this.state.aboutImage2 ? \'Upload/Select Photo\' : \'Change Photo\'}
                        </Button>
                      )}
                    />
                  </div>
                </div>
                <RichText
                  tag=\'p\'
                  value={this.state.aboutDetails}
                  onChange={value => this.setState({ aboutDetails: value })}
                  placeholder=\'Click here to add details about this classmate...\'
                />
              </div>
            </div>
            <!-- ... -->
          </div>

          <div className=\'right-side\'>
            <div className=\'panel panel-default\'>
              <div className=\'panel-heading\'>
                <strong>Contact Info</strong>
              </div>
              <div className=\'panel-body\'>
                <table className=\'borderless\'>
                  <tr>
                    <th colSpan=\'2\'>Name &amp; Company</th>
                  </tr>
                  <tr>
                    <td>
                      <label htmlFor=\'firstName\'>First Name</label>
                    </td>
                    <td>
                      <TextControl
                        value={this.state.firstName}
                        onChange={value => this.setState({ firstName: value })}
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <label htmlFor=\'middleName\'>Middle Name</label>
                    </td>
                    <td>
                      <TextControl
                        value={this.state.middleName}
                        onChange={value => this.setState({ middleName: value })}
                      />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <label htmlFor=\'lastName\'>Last Name</label>
                    </td>
                    <td>
                      <TextControl
                        value={this.state.lastName}
                        onChange={value => this.setState({ lastName: value })}
                      />
                    </td>
                  </tr>
                  <!-- ... -->
                </table>
              </div>
            </div>
          </div>
        </div>
      )
    }
  }
}

if (document.getElementById(\'edit_classmate_profile\')) {
  ReactDOM.render(<ClassmateProfile />, document.getElementById(\'edit_classmate_profile\'))
}