Wordpress CheckboxControl 的 ES5 代码会是什么样子

【问题标题】：What will ES5 code look like for Wordpress CheckboxControlWordpress CheckboxControl 的 ES5 代码会是什么样子
【发布时间】：2020-03-12 11:26:14
【问题描述】：

我是 React 和 Wordpress Gutenberg 块的新手。我想知道下面的代码在 ES5 中会是什么样子。

    const MyCheckboxControl = () => (
        const [ isChecked, setChecked ] = useState( true );
        <CheckboxControl
            heading="User"
            label="Is author"
            help="Is the user a author or not?"
            checked={ isChecked }
            onChange={ setChecked }
        />
    ) );

【问题讨论】：

这只是一个函数。实际上它看起来是错误的，因为它没有返回 JSX。
来自 Wordpress 手册

标签： reactjs wordpress ecmascript-5

【解决方案1】：

如果有人还在使用 ES5，你可以使用window.wp.element.createElement：

// (function (blocks, element, editor, components) {
// const el = element.createElement
// const { CheckboxControl } = window.wp.components
// ...

el(CheckboxControl, {
  label: "Checkbox Control",
  value: props.attributes.checkboxAttribute,
  onChange: (value) => {
    props.setAttributes({ checkboxAttribute: value })
  }
})

// ...
// })(window.wp.blocks, window.wp.element, window.wp.blockEditor, window.wp.components)

【讨论】：