Question

我有现有的PHP应用程序，我想用React创建丰富的组件。

在我的应用程序中，我没有对React集成的api，我认为最简单的方法就是将数据从PHP打印为HTML作为JSON并从React加载这些数据。

例如：

<?php $data = ..some data loaded from DB.. ?>
<div id="react-component-root" data="<?= json($data) ?>">

问题是：从PHP生成的HTML到React共享数据的最佳解决方案是什么？

最好=简单易用

Answer 1

在HTML中可以

<div class="react-component" data="{a:1,b:1,c:[1,2,3]}"></div>
<div class="react-component" data="{a:2,b:1,c:[1,2,3]}"></div>
<div class="react-component" data="{a:3,b:1,c:[1,2,3]}"></div>

在JS中

import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'

const Component = (props) => {
    return <div>{JSON.stringify(props)}</div>
}

_.forEach(document.getElementsByClassName('react-component'), (element) => {
    ReactDOM.render(<Component data={element.getAttribute('data')} />, element)
})

将生成的HTML中的数据共享到React

1 个答案: