我正在使用React和hypernova(带php bindings)来执行某些React组件的服务器端呈现。下面是我的以下测试组件和hypernova的响应。
import React from 'react';
import { renderReact } from 'hypernova-react';
class Test extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<p onClick={() => alert('hey')}>click me</p>
);
}
}
export default renderReact('Test', Test);
WF\Hypernova\JobResult Object
(
[error] =>
[html] =>
<div data-hypernova-key="Test" data-hypernova-id="e5af0b95-2a31-4ce4-8e36-808605fd4115">
<p data-reactroot="">click me</p>
</div>
<script type="application/json" data-hypernova-key="Test" data-hypernova-id="e5af0b95-2a31-4ce4-8e36-808605fd4115">
<!--{"prop1":"a","prop2":"b"}-->
</script>
[success] => 1
...
)
如上所示,props
正在成功传递,但onClick
处理程序无处可寻。但是,它确实存在于已编译的代码中。
// code before and after class omitted for brevity
var Test = function (_React$Component) {
_inherits(Test, _React$Component);
function Test(props) {
_classCallCheck(this, Test);
return _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).call(this, props));
}
_createClass(Test, [{
key: 'render',
value: function render() {
return _react2.default.createElement(
'p',
{ onClick: function onClick() {
return alert('hey');
} },
'click me'
);
}
}]);
return Test;
}(_react2.default.Component);
exports.default = (0, _hypernovaReact.renderReact)('Test', Test);
我唯一能够在这个问题上找到的就是github issue tracker,其中有人抱怨同样的事情,但显然不应该是一个事件处理程序在<p>
标签上;它应该存在于React提供的代码中。我还尝试使用带/不带箭头符号的类属性来指定单击处理程序(在后一种情况下在构造函数中显式绑定)。我在我的捆绑式React代码中添加了<script>
标记,但这似乎没有什么区别。
这是一个错误,还是我做错了什么?
答案 0 :(得分:0)
事实证明,在使用服务器端渲染时,需要在服务器和客户端上呈现组件。在我的例子中,这需要创建两个单独的webpack配置:一个用于hypernova服务器,另一个用于客户端React代码。然后,我需要添加像
这样的代码if (typeof document !== 'undefined') {
ReactDOM.render(<Test />, document.getElementById('puzzle'));
}
在父组件中,以便React在客户端上呈现它们,而不在服务器上生成异常。
我从this question找到了这个。
答案 1 :(得分:0)
是的,这不足以使组件正常工作。
您在Test.js
中所做的事情:
...
export default renderReact('Test', Test);
它实际上是组件Test
的服务器端渲染。因此,如您所见,超新星会正确返回您的位置:
<div data-hypernova-key="Test" data-hypernova-id="e5af0b95-2a31-4ce4-8e36-808605fd4115">
<p data-reactroot="">click me</p>
</div>
<script type="application/json" data-hypernova-key="Test" data-hypernova-id="e5af0b95-2a31-4ce4-8e36-808605fd4115">
<!--{"prop1":"a","prop2":"b"}-->
</script>
除了这部分之外,您还需要加载客户端脚本并运行组件的重新水化(https://reactjs.org/docs/react-dom.html#hydrate)。在超新星中,您需要准备另一个带有入口点的捆绑包:
// Test.js
const Test = () => {...}
export default Test
// index.js
import Test from './Test'
renderReact('Test', Test); // this will call hydrate when loaded in browser directly
并手动将此捆绑包加载到您的index.html
页面上:
...
<script src='public/bundle.js'></script>
为帮助服务该文件,hypernova具有以下配置:
hypernova({
...,
createApplication () {
const app = express()
app.get('/', (req, res) => res.status(200).json('OK'))
app.use('/public', express.static(path.join(process.cwd(), 'public')))
return app
}
})
享受!希望它能帮助您弄清楚如何使用超新星。