Symfony Twig + ReactJS

Question

我想从Twig模板中呈现一个ReactJS组件。这是否可行？

我尝试了：

<div class="top-line">
    <h1>{{ username }}</h1>

    {% verbatim %}
    <script type="text/html" id="follow-button">
        <FriendshipButton user={{ app.user }} />
    </script>
    {% endverbatim %}
    <div id="follow-button-mp"></div>
</div>

在JS方面：

React.render(
    React.createElement(document.getElementById('follow-button').innerHTML),
    document.getElementById('follow-button-mp')
);

出现错误：

 Uncaught Error: Invariant Violation: Invalid tag: 
        <FriendshipButton user={{ app.user }} />

- Lukas Lukac

---

Twig对JSX一无所知，所以我看不到它能起作用。为什么不在JavaScript中使用Twig声明用户，然后使用该变量挂载React组件呢？ - Richard

我添加了一个示例，展示如何使用Twig中的js变量挂载组件。 - Richard

移除verbatim标签部分：verbatim的作用是将原始文本保留下来，不进行解析，详见文档http://twig.sensiolabs.org/doc/tags/verbatim.html。 - Matteo

Answer 1

Twig:

<script type="text/javascript">

    // you might have to serialise user to JSON here if you
    // want a more complete user object
    var user = '{{ app.user.id }}';

</script>

Javascript组件（使用JSX）

React.render(

    <FriendshipButton user={user} />,
    document.getElementById('follow-button-mp')
);

- Richard

---

我一直在这样做，但是我在想是否有一种方法可以将模板放在Twig侧，就像我尝试过的那样。 - Lukas Lukac