React 'компонент' аргумент отсутствует ошибка?

Я создал компонент Header. Я использую этот компонент реакции Header с meteor-blaze, но в консоли появляется сообщение об отсутствии компонента аргумента реакции. Я имею в виду эти документы -> https://guide.meteor.com/react.html#blaze-in-react

league_header.html:

<template name = "LeagueHeader">
{{#if isCordova}}
  {{> HeaderMobile }}
{{else}}
    <div>
        {{> React component=Header }}
    </div>
{{/if}}
</template>

headerhelper.js:

import { Template } from 'meteor/templating';

import './league_header.html';
import Header from '../../../imports/Header.jsx';

Template.LeagueHeader.helpers({
  HeaderHelper() {
    return Header;
  }
})

Header.jsx:

import React, { Component } from 'react';

class Header extends Component {

    render() {
        console.info('Hello Component');
        return (
            <div>
                <h2>Hello World</h2>
            </div>
        );
    }
}

export default Header;

Ошибка:

Error: In template "LeagueHeader", call to `{{> React ... }}` missing `component` argument.
    at Blaze.View.<anonymous> (react-template-helper.js:23)
    at blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:1934
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:3744)
    at blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:1932
    at Object.Blaze._withCurrentView (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2271)
    at viewAutorun (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:1931)
    at Tracker.Computation._compute (tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:339)
    at new Tracker.Computation (tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:229)
    at Object.Tracker.autorun (tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:613)
    at Blaze.View.autorun (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:1944)

Скриншот: React &apos;компонент&apos; аргумент отсутствует ошибка?

Пожалуйста, добавьте вывод ошибки в виде кода вместо изображения.

Jankapunkt 08.07.2018 18:00

В файле headerhelper.js выполните console.info(Header) перед оператором return и дайте мне знать, каков будет результат.

theJuls 08.07.2018 18:02

@Jankapunkt Проверить отредактированный вопрос

stone rock 08.07.2018 18:04

@theJuls В консоли ничего не отображается, кроме ошибки.

stone rock 08.07.2018 18:06

Ваш помощник должен быть переименован в Header вместо HeaderHelper, или вы переименуете свой параметр в HeaderHelper

Jankapunkt 08.07.2018 18:07

@Jankapunkt Я не могу понять? Напишите ответ, пожалуйста :)

stone rock 08.07.2018 18:08

@ Смотри ответ captainZi

Jankapunkt 08.07.2018 19:50

@Jankapunkt Не работает chck this -> imgur.com/a/w8nNDRX

stone rock 09.07.2018 06:52

вы добавили этот пакет: meteor add react-template-helper? и попробуйте изменить: `` Template.LeagueHeader.helpers ({HeaderHelper () {return Header;}}) `` на `` Template.LeagueHeader.helpers ({Header () {return Header;}}) ` ``

Minh Nguyen 09.07.2018 11:18

или попробуйте поменять: {{> React component=Header }} на {{> React component=HeaderHelper }}

Minh Nguyen 09.07.2018 11:24

@MinhNguyen Мне нужен import react-template-helper? Если да, то в каком файле?

stone rock 09.07.2018 12:52

@MinhNguyen Я загрузил react-template-helper, что мне делать дальше? Нужно ли мне импортировать что-нибудь в мой шаблон или реагировать компонент.

stone rock 09.07.2018 17:39
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
12
607
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы используете неправильное имя помощника Попробуйте заменить на это вызов компонента.

{{> React component=HeaderHelper}}

Я воспроизвел это, и это работает. Поэтому я предполагаю, что Header.jsx не импортирован (неправильный путь?). Пожалуйста, console.info (заголовок) в HeaderHelper перед возвратом.

Jankapunkt 15.07.2018 14:43

Другие вопросы по теме