可以将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 );

【可以将home_url()动态传递给使用React构建的主题吗()】然后在你的js文件中…
componentDidMount() { axios.get(MY_OBJ.users_url) .then(res => { const persons = res.data; this.setState({ persons }); }) }

    推荐阅读