在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 });
})
}
推荐阅读
- 无法将自定义页面模板添加到我的子主题
- 在第790行的config-woocommerce/config.php中的非对象上调用成员函数get_cart_subtotal()
- 调用未定义的WordPress函数get_header()错误,但标题仍显示
- 根据帖子数在循环内调用变量
- 从头开始构建主题–标头未显示
- 从WordPress中的functions.php调用jQuery
- Buddypress成员区域在我的实时服务器中为空白
- 上面内容的Bootstrap导航栏不粘
- #IT人的升职加薪tips# 升职向左,身体向右