可以将home_url()动态传递给使用React构建的主题吗？

在React中测试并构建一个WordPress主题, 我通常会看到URL硬编码在componentDidMount中, 如下所示：

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-> Home.js中是否有办法, 我可以在示例https：// foobar中传递home_url, 而无需手动修改Home.js？

每次使用参数[wordpress] [reactjs]查询网站时, 我一直无法找到是否被问到。能做到这一点还是一种将wp-json / wp / v2动态传递给React的方法？

编辑：

我正在尝试做的事情似乎有些混乱。如果要在React中使用Axios而不是获取, 例如在React中使用Axios的示例, 则必须使用GET从WordPress中提取WP_JSON。该示例链接使用：

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

URL https://jsonplaceholder.typicode.com/users是静态的, 每次将这个主题加载到新站点时, 都需要更改URL。如何更改当前URL以动态匹配主题的托管URL, 以便将域从以下位置更改为：

https://jsonplaceholder.typicode.com/users

to

https://jsonwinners.typicode.com/users

我不必手动进行。

#1

从你要实现的目标来看, 我宁愿使用document.location.origin

但是, 要回答你的问题, 你可以获取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 });
         })
 }