JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/[email protected]/built/bundle.js"></script>
<script src="https://unpkg.com/[email protected]/built/bundle.js"></script>
<script src="https://unpkg.com/[email protected]/built/bundle.js"></script>
<div style="width: 100vw; height: 100vh" id='react-dom'></div>

CSS

html, body {
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
}

Babel + JSX

// import GaeaEditor from 'gaea-editor'
// import { Connect } from 'dynamic-react'

@Connect
class ShowEditor extends React.Component {
  render() {	
  	if(!this.props.stores.
  			ViewportStore.instances.
  			has(this.props.stores.
 				ViewportStore.currentEditInstanceKey)) {
      return null
    }
    
    this.instanceInfo = this.props.stores.
    	ViewportStore.instances.
    	get(this.props.stores.
    	ViewportStore.currentEditInstanceKey)
    
    const currentValue = this.props.actions.
    ViewportAction.getInstanceProps(this.
    props.stores.ViewportStore.
    currentEditInstanceKey, this.props.realField)
  
  	return <div style={{marginRight: 50}}>
  	  <input 
        type="checkbox" 
        checked={currentValue}
        onChange={this.handleChange}
      />
  	</div>
  }
  
  handleChange = (value: string) => {
    this.props.actions.ViewportAction.
    setInstanceProps(this.props.stores.
    ViewportStore.currentEditInstanceKey, this.props.realField, value.currentTarget.checked)
  }
}

const OpacityEditorWrap = {
	position: "mainToolEditorTypeShow",
  class: ShowEditor
}

class CustomComponent extends React.Component {
	static defaultProps = {
    isShow: true,
  	gaeaSetting: {
      key: "custom-text",
      name: "自定义组件",
      editors: [
        {
        	field: "isShow",
          label: "是否显示",
          type: "show"
        }
      ]
    }
  }
  
  render() {
  	if (!this.props.isShow) {
    	return null
    }
  
  	return <div style={this.props.style}>custom component</div>
  }
}

ReactDOM.render(
  <GaeaEditor plugins={[OpacityEditorWrap]} componentClasses={[CustomComponent]} />
, document.getElementById('react-dom'))