Implementing Custom Component Rendering in WeChat Mini Programs Using React and JSX Transformation

In this article the author, a well‑known frontend expert, explains how to render custom components in WeChat mini‑programs where direct DOM manipulation and view updates are prohibited.

The solution is to compile the component's render method into a template class, generate two separate templates—one for React and one for the mini‑program—and initialize them to obtain props and state for the mini‑program template tag.

Example code shows a class P extending Page with state containing an array of objects, and a render method that maps the array to Dog components using either React template or mini‑program view / template syntax.

Because the mini‑program does not understand JSX braces, the author replaces them with the wx:for directive and passes data through a generated templatedata attribute, which is later filled by Babel at compile time.

The article also describes a helper miniCreateClass that creates ES6‑style classes compatible with the mini‑program runtime, and shows how the page is finally created with Page(createPage(P)), where createPage renders the React component to a hidden DOM node, extracts its state and props, and builds the mini‑program configuration object.

Finally, the implementation of React.template is presented; it hijacks the component prototype, records template data during componentWillMount, and returns a React element that renders the original class with the collected template information.

The author invites collaborators to continue the work on GitHub.