README

由于ReactJS组件可以在应用程序中部分渲染，此扩展将reactapp指令转换为HTML和JavaScript。让您在twig模板中编写可读的代码。

安装

composer require corneltek/twig-react-directive "*"

用法

use TwigReactDirective\ReactDirectiveExtension;

$twig = new Twig_Environment($loader);
$twig->addExtension(new ReactDirectiveExtension);

模板示例

{% reactapp "MyApp" with { title: 'Todo List' , items: [ ... ] } %}

{% set config = { ... } %}
{% reactapp "MyApp" with config %}

上述代码输出

<div id="MyApp123fa9ef"> </div>
<script type="text/javascript">
if (typeof __dom_ready === "undefined") {
  function __dom_ready(cb) {
    var d = document;
    var hack = d.documentElement.doScroll;
    var loaded = (hack ? /^loaded|^c/ : /^loaded|^i|^c/).test(d.readyState)
    if (!loaded) {
      d.addEventListener("DOMContentLoaded", function(){
        d.removeEventListener("DOMContentLoaded", arguments.callee, false );
        cb();
      }, false);
    }
    if (loaded) {setTimeout(cb, 0);}
  }
}
(function() {
  var ready = typeof jQuery !== "undefined" ? jQuery : __dom_ready;
ready(function() {
  var app = React.createElement(MyApp, {"title":"test title"});
  React.render(app, document.getElementById("MyApp123fa9ef"));
});

})();
</script>

corneltek / twig-react-directive

维护者

详细信息

README

安装

用法

模板示例