2016-03-28 6 views
1

Это должен быть простой вопрос:Метеор - рендеринг шаблона пламени внутри шаблона реакции?

Скажите, что у меня есть обычное приложение Meteor, используя реактивный пакет.

У меня есть файл root.html и есть потоковый маршрутизатор, который отображает шаблон JSX на маршруте '/'.

Скажите, что я хочу, чтобы мой шаблон JSX вставлял шаблон пламени.

Как мне это сделать?

Возьмем, например, следующий код:

# test.js 
<template name="Test"> 
Hello world 
</template> 

...

# root.jsx 
Root = React.createClass({ 
    render() { 
    return(
     <div> 
     {this.props.content} 
     </div> 
    ) 
    } 
}) 

...

# routes.jsx 
FlowRouter.route("/", { 
    name: "root", 
    action: function(params, queryParams) { 
    ReactLayout.render(Root, 
     {content: <Test />}) 
    } 
}) 

Но с этим кодом, я получаю на стороне клиента об ошибке о невозможности найти <Test />.

ответ

3

Хорошо, я понял это.

Я также понял, как обратное (как сделать реагировать шаблоны изнутри блеске)

Так, чтобы сделать пламя из срабатывают, вы делаете класс-оболочку:

AccountsWrapper = React.createClass({ 
    componentDidMount() { 
    this.view = Blaze.render(Template.Accounts, 
     React.findDOMNode(this.refs.container)); 
    }, 
    componentWillUnmount() { 
    Blaze.remove(this.view); 
    }, 
    render() { 
    // Just render a placeholder container that will be filled in 
    return <span ref="container" />; 
    } 
}); 

Это ссылается на взрывную шаблон, задаваемый в accounts.html:

<template name="Accounts"> 
    {{> loginButtons }} 
    <div> 
    {{> React component=Test}} 
    </div> 
</template> 

в моем файле маршрутов, я сделать шаблон обертку следующим образом:

FlowRouter.route("/", { 
    name: "root", 
    action: function(params, queryParams) { 
    ReactLayout.render(Root, 
     {content: <AccountsWrapper />}) 
    } 
}) 

Вы также можете видеть, что в моем Blaze шаблоне я звоню

{{> React component=Test}} 

Это зависит от react-template-helper пакета и я обернуть реагировать шаблон, используя следующий код (в JSX:

Test = React.createClass({ 
    render() { 
    return <div> 
    WORKING 
    </div> 
    } 
}) 

if (Meteor.isClient) { 
    Template.Accounts.helpers({ 
    Test() { 
     return Test; 
    } 
    }) 
} 
Смежные вопросы