Question

我想在我的Wordpress插件中使用一些我发布到NPM的React组件-我试图创建一个短代码来呈现该组件。

我正在按照本教程进行调整：https://github.com/stcalica/wp-js-plugin-starter

在我的src/index.js中，我有：

import { AwesomeButton } from "react-awesome-button";
console.log("Start the engine!");
wp.element.render(<AwesomeButton  type="primary">Button</AwesomeButton>, document.getElementById('test-react'));

在我的控制台中，出现此错误：

Uncaught ReferenceError: createElement is not defined
  at Object.parcelRequire.Focm.react-awesome-button (index.js?ver=1554053763:17)
    at u (index.js?ver=1554053763:1)
    at parcelRequire.J4Nk (index.js?ver=1554053763:1)
    at index.js?ver=1554053763:1

我相信这是因为Wordpress的React版本无法理解AwesomeButton的语法。有什么办法解决吗？我需要对Babel进行更多配置吗？

我的其他配置文件：

这是我的.babelrc：

{
  "presets": ["@wordpress/default"]
}

这是我插件的主要php文件：

function wp_js_plugin_starter_url( $path ) {
    return plugins_url( $path, __FILE__ );
}

/**
 * Registers the plugin's script.
 *
 * @since 1.0.0
 */
function wp_js_plugin_starter_register_script() {
    wp_register_script(
        'wp-js-plugin-starter',
        wp_js_plugin_starter_url( 'dist/index.js' ),
        array()
    );
}

/**
 * Enqueues the plugin's script.
 *
 * @since 1.0.0
 */
function wp_js_plugin_starter_enqueue_script() {
    wp_enqueue_script( 'wp-js-plugin-starter' );
}

/**
 * Trigger the script registration on init.
 */
//add_action( 'init', 'wp_js_plugin_starter_register_script' );

/**
 * Enqueue the script in all admin pages
 */
add_action('wp_enqueue_scripts', 'my_enqueue_plugin_js' );

function my_enqueue_plugin_js() {
    wp_enqueue_script(
      'wp-js-plugin-starter',
      wp_js_plugin_starter_url( 'dist/index.js' ),
      ['wp-element'],
      time(), // Change this to null for production
      true
    );
}
//add_action( 'admin_enqueue_scripts', 'wp_js_plugin_starter_enqueue_script' );
add_shortcode('test', 'test');
/**
 * Return the link to the class textbook.
 */
function test() {
    return '<div id="test-react"></div>';
}

Answer 1

我忘记从class ViewController: UITableViewController { override func viewDidLoad() { super.viewDidLoad() tableView.keyboardDismissMode = .interactive becomeFirstResponder() } override var canBecomeFirstResponder: Bool { return true } var iav: UIView = UITextView(frame: CGRect(x: 0, y: 0, width: 200, height: 100)) override var inputAccessoryView: UIView? { return iav } override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 25 } override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCell(withIdentifier: "Test", for: indexPath) cell.textLabel?.text = indexPath.row.description return cell } }（即Wordpress的React库）中导入createElement和render函数。

将NPM模块导入Wordpress ReactJS插件

1 个答案: