home_url（）可以动态传递给使用React构建的主题吗？

Question

在React中测试并构建WordPress主题我通常看到在componentDidMount中硬编码的URL如下：

class Home extends React.Component{
    componentDidMount(){
        const API_URL = 'https://foobar/wp-json/wp/v2/posts/';
        this.serverRequest = $.get(API_URL, function (result) {
            this.setState({
                result:result,
                loaded:true
            });
        }.bind(this));
    }
}
export default Home;

但我很想知道在functions.php中是否有办法 - ＆gt; Home.js我可以在示例https://foobar中传递home_url，而无需手动修改Home.js？

使用参数查询网站[wordpress][reactjs]我一直无法找到是否有人问这个问题。可以这样做，还是可以动态地将wp-json/wp/v2传递给React？

修改

我正在尝试做的事似乎有些混乱。如果您使用带有React的Axios而不是fetch，例如来自Using Axios with React，则必须使用GET从WordPress中提取WP_JSON。示例链接使用：

componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => {
            const persons = res.data;
            this.setState({ persons });
        })
}

网址https://jsonplaceholder.typicode.com/users是静态的，每次我将此主题加载到新网站时，都需要更改网址。如何更改当前网址以动态匹配主题的托管网址，以便在以下网址中进行更改：

https://jsonplaceholder.typicode.com/users

到

https://jsonwinners.typicode.com/users

我不必手动完成。

Answer 1

从您尝试实现的目标来看，我宁愿使用document.location.origin

然而，要回答你的问题，你 CAN 让php将变量发送到javascript ....

方法1（脏） - 头部的自定义脚本标记

add_action('wp_head', function(){
     echo '<script>var MY_OBJ.users_url = "'.home_url('/users').'";</script>';
});

然后在你的js文件中......

 componentDidMount() {
      axios.get(MY_OBJ.users_url)
         .then(res => {
             const persons = res.data;
              this.setState({ persons });
         })
 }

方法2 - 本地化脚本

wp_enqueue_script( 'home-js', get_theme_file_uri('/assets/js/Home.js'), array(), '1.0', true );

$my_php_array = array(
    'home_url' => home_url('')
    'users_url' => home_url('/users')
);

wp_localize_script( 'home-js', 'MY_OBJ', $my_php_array );

然后在你的js文件中......

 componentDidMount() {
      axios.get(MY_OBJ.users_url)
         .then(res => {
             const persons = res.data;
              this.setState({ persons });
         })
 }