Question

我有一个map函数，该函数在控制台中返回结果，但是未在DOM中呈现。

这是我的地图功能：

<?php
update_option( 'siteurl', 'http://2018.hellotreelb.com/luxin' );
update_option( 'home', 'http://2018.hellotreelb.com/luxin' );
/**
 *
 * @link https://codex.wordpress.org/Theme_Development
 * @link https://codex.wordpress.org/Child_Themes
 *
 * Functions that are not pluggable (not wrapped in function_exists()) are
 * instead attached to a filter or action hook.
 *
 * For more information on hooks, actions, and filters,
 * {@link https://codex.wordpress.org/Plugin_API}
 */

function cosmetro_child_scripts() {
    wp_enqueue_style( 'cosmetro-parent-style', get_template_directory_uri(). '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'cosmetro_child_scripts' );


// function woocommerce_single_product_summary_button() {
//  echo '<a class="back_button" href="#" onclick="window.history.back()">Back</a>';
// }

// add_action( 'woocommerce_single_product_summary', 'woocommerce_single_product_summary_button', 11);

add_action('product_cat_add_form_fields', 'wh_taxonomy_add_new_meta_field', 10, 1);
add_action('product_cat_edit_form_fields', 'wh_taxonomy_edit_meta_field', 10, 1);
//Product Cat Create page

function wh_taxonomy_add_new_meta_field() {
    ?>
    <div class="form-field">
        <label for="wh_meta_title"><?php _e('Cover Image', 'wh'); ?></label>
        <input type="file" name="" id="cover_image">
        <p class="description"><?php _e('Enter a cover_image, <= 60 character', 'wh'); ?></p>
    </div>
    <div class="form-field">
        <label for="wh_meta_desc"><?php _e('subName', 'wh'); ?></label>
        <input type="text" name="" id="subName">
        <p class="description"><?php _e('subName', 'wh'); ?></p>
    </div>
    <?php
}
//Product Cat Edit page
function wh_taxonomy_edit_meta_field($term) {
    //getting term ID
    $term_id = $term->term_id;
    // retrieve the existing value(s) for this meta field.
    $wh_meta_title = get_term_meta($term_id, 'wh_meta_title', true);
    $wh_meta_subName = get_term_meta($term_id, 'wh_meta_subName', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="wh_meta_title"><?php _e('Meta Title', 'wh'); ?></label></th>
        <td>
            <input type="file" name="cover_image" id="cover_image" value="<?php echo esc_attr($wh_meta_title) ? esc_attr($wh_meta_title) : ''; ?>">
            <p class="description"><?php _e('Enter a meta title, <= 60 character', 'wh'); ?></p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="wh_meta_subName"><?php _e('subName', 'wh'); ?></label></th>
        <td>
            <input type="text" name="subName" id="subName" value="<?php echo esc_attr($wh_meta_subName) ? esc_attr($wh_meta_subName) : ''; ?>">
            <p class="description"><?php _e('subName', 'wh'); ?></p>
        </td>
    </tr>
    <?php
}
add_action('edited_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);
add_action('create_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);
// Save extra taxonomy fields callback function.
function wh_save_taxonomy_custom_meta($term_id) {
    $wh_meta_title = filter_input(INPUT_POST, 'wh_meta_title');
    $wh_meta_subName = filter_input(INPUT_POST, 'wh_meta_subName');
    update_term_meta($term_id, 'wh_meta_title', $wh_meta_title);
    update_term_meta($term_id, 'wh_meta_subName', $wh_meta_subName);
}

这是我的渲染调用中的内容：

    //init
    var players = []
    var maxNumberOfPlayer = 2
    setPlaceHolder(1)


    btnName.addEventListener("click",function(){
        if(players.length == maxNumberOfPlayer ) {
            return
        }
        players.push(document.getElementById("playerNameInput").value)
        setPlaceHolder(players.length)
    })

    function setPlaceHolder(playerNumber) {
        document.getElementById("playerNameInput").placeholder = `PLAYER NAME ${playerNumber}`
    }

控制台向我正确显示了所有内容，但是DOM中未显示任何内容。我还在学习React和ES2016。任何见解都是有帮助和赞赏的！

Answer 1

在浏览器上显示它们的解决方案是在return方法中添加renderFeaturedMakes语句。否则，此方法将不会返回任何内容。

如果您想在ES2016中编写它们，可能会对您有所帮助。

const featuredMakes = makes.filter(makes => makes.featured === true);
const featured = Object.keys(featuredMakes).map(s => (
    <Col className="mb-3">
        <Link
            key={featuredMakes[s].title}
            href={{ pathname: '/deal-list', query: query }}
            as={{ pathname: '/filter', query: query }}
            passHref
        >
            <a>
                <img
                    style={{ height: '80px', width: '80px' }}
                    src={featuredMakes[s].logo}
                    alt={featuredMakes[s].title + ' logo'}
                />
            </a>
        </Link>
    </Col>
));
return featured;

// or just return instead of inserting `featured` variable
// return Object.keys(featuredMakes).map(s => {

Answer 2

我最终得到了它。当我需要直接返回时，我是从var返回的。上方的第2行：

return Object.keys(featuredMakes).map(function(s){ 
        // console.log(featuredMakes[s]);  
        return (

反应地图功能未渲染

2 个答案: