Question

我使用Laravel 5.4和React 15.5.4，代码在ES6中编写。

我想替换Vue并使用React并且我做了。但我经常会在刀片模板的不同位置使用例如2的小组件。我不想使用一个应用程序组件。

我喜欢使用类似的东西：

<span class="react">
<TestComponent property={true} />
</span>

我无法自动完成。现在我用

<span data-component="TestComponent" data-props="{property:true}" />

和app.js

_.each(document.querySelectorAll('[data-react]'), element => {
  let props ={};
  Array.prototype.slice.call(element.attributes)
  .forEach(item => {
    props[item.name] = item.value;
    if(item.name !== 'data-react'){
      element.removeAttribute(item.name);  
    }

  });
  ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
});

它有效，但我需要使用将所有属性添加到一个反应组件属性，然后使用例如this.props.out.propery

我还想在我的刀片组件中设置普通组件标签

我尝试在app.js中使用

_.each(document.querySelectorAll('.react'), item => {  
  ReactDOM.render(item.children,item);
});

有人有任何想法解决这个问题吗？

修改

我将解决方案改为：

<span data-react="LoginForm" input="{{json(request()->old())}}" error="{{session('error')}}" errors="{{json($errors->getMessages())}}" />

或

<LoginForm data-react="LoginForm" input="{{json(request()->old())}}" error="{{session('error')}}" errors="{{json($errors->getMessages())}}" />

刀片和resources/assets/js/app.js

中的

var reactComponents = {
  LoginForm: require('./components/login').default,
};
_.each(document.querySelectorAll('[data-react]'), element => {
  let props ={};
  Array.prototype.slice.call(element.attributes)
  .forEach(item => {
    props[item.name] = item.value;
  });
  ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
});

工作正常。这不是超级明确的解决方案，但我的印象是合理的。我可以在html代码中设置组件名称，并添加几乎与JSX相同的道具。

Answer 1

据我所知，您不能将JSX组件直接与Blade模板混合使用。目前唯一可用于React的服务器端呈现是NodeJS。您可以采取哪些措施来改进您的体系结构，添加具有特定ID的特定HTML标记，并在其中呈现反应组件。所以在Blade中你可以做类似的事情：

<div id="componentA"></div>

这将作为反应组件的Blade模板中的占位符。然后从app.js中渲染 componentA ，如下所示：

React.render(<ComponentA prop1='valueX'/>, document.getElementById("componentA"))

请记住，在这种情况下，反应世界和刀锋世界会在不同的时间运行。

Answer 2

您可以使用document.getElementsByTagName('LoginForm')获取所有实例，并在以后对其属性进行迭代。这是清晰的代码，但不是通用代码，因为它仅适用于LoginForm组件。

如果要呈现任何标签名称，那么最好使用与data-react一起使用的某些属性。

getElementsByTagName不受old browsers的超级支持，因此使用jQuery作为后备$('LoginForm')

可能是一个好主意。

在Laravel刀片模板中调用ReactJS组件

2 个答案: