我将使用React构建一个简单的静态视图引擎,旨在呈现静态的HTML标记并生成一个js文件,其中包含该组件的DOM事件(例如onClick等)。
我完成第一部分的方式是通过要求指定的JSX文件,例如下面的文件:
我完成第一部分的方式是通过要求指定的JSX文件,例如下面的文件:
import React from 'React';
export default class Test extends React.Component {
clicked() {
alert('Clicked the header!');
}
render() {
return (
<html>
<head>
<title>{this.props.title}</title>
</head>
<body>
<h1 onClick={this.clicked}>click me!!!</h1>
</body>
</html>
);
}
}
我现在通过NodeJS后端来渲染JSX文件,代码如下:
let view = require('path-to-the-jsx-file');
view = view.default || view;
const ViewElement = React.createFactory(view);
let output = ReactDOMServer.renderToStaticMarkup(ViewElement(props));
它非常适合用于提供静态HTML。但是我想知道是否有一种方法可以访问JSX文件中使用的所有组件并将其存储在数组或其他数据结构中,然后可以使用该数组来检查绑定了哪些事件以及绑定到哪些处理程序。
因此,在此示例中,能否获取<h1>
标签的onClick
处理程序?是否可能以某种方式实现这一点?