我正在尝试使用create react应用程序创建WordPress插件。为了让事情变得简单，我正在尝试开发一个点击推特插件。

短代码部分（在PHP中）如下所示：

// Shortcode to output needed markup
add_shortcode( \'react_click_to_tweet\', \'react_click_to_tweet_test\' );
function react_click_to_tweet_test($atts = [], $content = null, $tag = \'\') {
    return \'<div id="root" data=\' . $content . \'></div>\';
}

function include_react_files() {
  wp_enqueue_style( \'prefix-style\', plugins_url(\'css/main.ae114d0c.css\', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_enqueue_script( \'plugin-scripts\', plugins_url(\'js/main.d8745ba2.js\', __FILE__),array(),  \'0.0.1\', true );
}

add_action( \'wp_enqueue_scripts\', \'include_react_files\' );

$content应该是我想要传递的推文文本，其短代码为：

[react_click_to_tweet]TEXT TO TWEET[/react_click_to_tweet]

索引。js有：

ReactDOM.render(<App />, document.getElementById(\'root\'));
registerServiceWorker();

但这不起作用。有什么建议吗？

此外，aI如何传递$ATT以传递例如属性以在运行时修改CSS？

[编辑]根据Paul Burilichev和belinus的建议，我做了以下修改：

我试过他们的方法WP AJAX 对于带参数的短代码。我试过：

add_shortcode( \'react_click_to_tweet\', \'react_click_to_tweet_test\' ); 
function react_click_to_tweet_test($atts = [], $content = null, $tag = \'\') {
  $o = \'\'; 
  $o .= \'<div id="tweet" >\'; 
  if (!is_null($content)) {
    $o .= apply_filters(\'content\', $content);
    // run shortcode parser recursively
    $o .= do_shortcode($content);
  }
  // end box
  $o .= \'</div>\'; 
  return $o; //\'<div id="root" ></div>\';
} 

但是，它不起作用。我错过了什么？

然后，我尝试：

function include_react_files() {
  wp_enqueue_style( \'prefix-style\', plugins_url(\'css/main.ae114d0c.css\', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( \'plugin-scripts\', plugins_url(\'js/main.d8745ba2.js\',  __FILE__),array(),  \'0.0.1\', true );
  $data = array( 
    \'text\' => $content, // I also tried passing a string \'some content goes here\'
    \'key2\' =? \'value2\',
  );
  wp_localize_script( \'plugin-scripts\', \'wp_object\', $data );
  wp_enqueue_script( \'plugin-scripts\' );
}

add_action( \'wp_enqueue_scripts\', \'include_react_files\' );

但我的应用程序组件上无法识别对象。我想我还是错过了一些东西。我的索引。js看起来像：

import React from \'react\'; 
import ReactDOM from \'react-dom\'; 
import App from \'./App\'; 
import registerServiceWorker from \'./registerServiceWorker\'; 
import \'./index.css\'; 

//const data = "This is some cool stuff"; 
ReactDOM.render( 
  <App />, document.getElementById(\'root\')); 
registerServiceWorker();

这是我的应用程序。js公司：

import React, { Component } from \'react\';
import \'./App.css\';

class App extends Component {
  render() {
    const page = window.location.href;
    let data = page+\'&text=\'+ wp_object.text;
    let twiiterUrl = "https://"+"twitter.com/intent/tweet?url=";
    let URL = twiiterUrl+data;

     //console.log(wp_object.text);
     return (
      <div className="App">
        <div className="tm-click-to-tweet">
            <div className="tm-ctt-text">
                <a href={URL} target="_blank">{wp_object.text} </a>
            </div>
            <a href={URL} className="tm-ctt-btn" target="_blank">Click To Tweet</a>
            <div className="tm-ctt-tip"></div>
            <div className="clear"></div>
        </div>
      </div>
    );
  }
}

export default App;

它不识别wp\\u对象；

function include_react_files() {
  wp_enqueue_style( \'prefix-style\', plugins_url(\'css/main.ae114d0c.css\', __FILE__) );

  // add the JS file to the footer - true as the last parameter
  wp_register_script( \'plugin-scripts\', plugins_url(\'js/main.d8745ba2.js\', __FILE__),array(),  \'0.0.1\', true );
  $data = array( 
     \'key1\' => \'value1\',
     \'key2\' =? \'value2\',
  );
  wp_localize_script( \'plugin-scripts\', \'object\', $data );
  wp_enqueue_script( \'plugin-scripts\' );
}

add_action( \'wp_enqueue_scripts\', \'include_react_files\' );

function json_config_file() {

        $file = plugin_dir_path( __DIR__ ).\'PATH_TO_REACT_SRC_FOLDER/wordpress.json\';

        $json = array(
            key=> value
        );

        $fp = fopen($file, \'w\');
        fwrite($fp, json_encode($json));
        fclose($fp);
    }

let wordpress = require(\'./wordpress.json\');

console.log(wordpress.value)