Question

让我们说我想即时渲染React组件并获得真正的DOM元素以供将来使用

例如，如果我有该组件：

<?php
/** Enable W3 Total Cache */
define('WP_CACHE', true); // Added by W3 Total Cache

/**
 * The base configuration for WordPress
 *
 * The wp-config.php creation script uses this file during the
 * installation. You don't have to use the web site, you can
 * copy this file to "wp-config.php" and fill in the values.
 *
 * This file contains the following configurations:
 *
 * * MySQL settings
 * * Secret keys
 * * Database table prefix
 * * ABSPATH
 *
 * @link https://codex.wordpress.org/Editing_wp-config.php
 *
 * @package WordPress
 */

//error_reporting(0);
define('WP_HOME','http://www.example.com');
define('WP_SITEURL','http://www.example.com');
define('WP_MEMORY_LIMIT', '96M');


// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', '**********');

/** MySQL database username */
define('DB_USER', '**********');

/** MySQL database password */
define('DB_PASSWORD', '**********');

/** MySQL hostname */
define('DB_HOST', '**********');

/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

/**#@+
 * Authentication Unique Keys and Salts.
 *
 * Change these to different unique phrases!
 * You can generate these using the {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org secret-key service}
 * You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again.
 *
 * @since 2.6.0
 */
define('AUTH_KEY',         'MY_UNIQUE_KEY');
define('SECURE_AUTH_KEY',  'MY_UNIQUE_KEY');
define('LOGGED_IN_KEY',    'MY_UNIQUE_KEY');
define('NONCE_KEY',        'MY_UNIQUE_KEY');
define('AUTH_SALT',        'MY_UNIQUE_KEY');
define('SECURE_AUTH_SALT', 'MY_UNIQUE_KEY');
define('LOGGED_IN_SALT',   'MY_UNIQUE_KEY');
define('NONCE_SALT',       'MY_UNIQUE_KEY');

/**#@-*/

/**
 * WordPress Database Table prefix.
 *
 * You can have multiple installations in one database if you give each
 * a unique prefix. Only numbers, letters, and underscores please!
 */
$table_prefix  = 'wp_';

/**
 * WordPress Localized Language, defaults to English.
 *
 * Change this to localize WordPress. A corresponding MO file for the chosen
 * language must be installed to wp-content/languages. For example, install
 * de_DE.mo to wp-content/languages and set WPLANG to 'de_DE' to enable German
 * language support.
 */
define('WPLANG', '');


/**
 * For developers: WordPress debugging mode.
 *
 * Change this to true to enable the display of notices during development.
 * It is strongly recommended that plugin and theme developers use WP_DEBUG
 * in their development environments.
 *
 * For information on other constants that can be used for debugging,
 * visit the Codex.
 *
 * @link https://codex.wordpress.org/Debugging_in_WordPress
 */
define('WP_DEBUG', true);

/* That's all, stop editing! Happy blogging. */

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
    define('ABSPATH', dirname(__FILE__) . '/');

/** Sets up WordPress vars and included files. */
require_once(ABSPATH . 'wp-settings.php');

如何渲染它并获得元素？

也许是这样

 function Card({symbol,id,color}){
  return <my-card symbol={} id={} color={color}></my-card>
 }

我需要真正的元素来玩耍。做一些测量。然后将其删除。

但是，我认为框架通常需要某种方式让开发人员在需要时持有真实的DOM元素；我的意思是，好的框架应该可以做到这一点

Answer 1

为什么不使用这样的东西：

const preRender = () => <Card symbol='4' id=111 color='♥'/>

现在您有了Card变量中呈现的preRender无状态组件的内容

Answer 2

render返回组件实例而不是DOM。正如ReactDOM.render documentation所述，

在提供的容器中将React元素渲染到DOM中，然后   返回对该组件的引用（或对于无状态返回null   组件）。

如果React元素先前已渲染到容器中，这将   对它执行更新，仅根据需要更改DOM以   反映最新的React元素。

如果提供了可选的回调，它将在   组件已呈现或更新。

DOM呈现到提供的容器元素：

const element = document.createElement('div');
ReactDOM.render(<Card ... />, element);
console.log(element.outerHTML);

如果组件是异步的，则应使用回调来检索对DOM的异步更新。

如何将“ React Component”呈现给DOM

2 个答案: