You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.0 KiB
39 lines
1.0 KiB
9 months ago
|
/**
|
||
|
|
* Common functions for loading React components in TablePress JS.
|
||
|
|
*
|
||
|
|
* @package TablePress
|
||
|
|
* @subpackage Views JavaScript
|
||
|
|
* @author Tobias Bäthge
|
||
|
|
* @since 2.2.0
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* WordPress dependencies.
|
||
|
|
*/
|
||
|
|
import { StrictMode } from 'react';
|
||
|
|
import { createRoot, render } from 'react-dom'; // eslint-disable-line react/no-deprecated
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initializes a React component on the page.
|
||
|
|
*
|
||
|
|
* @param {string} rootId HTML ID of the root element for the component.
|
||
|
|
* @param {Component} component JSX of the component.
|
||
|
|
*/
|
||
|
|
export const initializeReactComponent = ( rootId, component ) => {
|
||
|
|
if ( process.env.DEVELOP ) {
|
||
|
|
component = <StrictMode>{ component }</StrictMode>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const root = document.getElementById( rootId );
|
||
|
|
if ( root ) {
|
||
|
|
// Compatibility check for React 17 and 18.
|
||
|
|
if ( 'function' === typeof createRoot ) {
|
||
|
|
// React 18 (WP 6.2 and newer): Use createRoot().
|
||
|
|
createRoot( root ).render( component );
|
||
|
|
} else {
|
||
|
|
// React 17 (WP 6.1 and older): Use render().
|
||
|
|
render( component, root );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|