LaravelブレードテンプレートのReactJSコンポーネントへの呼び出し

Question

私はLaravel 5.4とReact 15.5.4を使用していますが、コードはES6で記述しています。

私はVueを置き換えてReactを使いたいと思いました。しかし、私はしばしばブレードテンプレートの異なる場所で例2のような小さなコンポーネントを使用します。私は1つのアプリコンポーネントを使いたくない。私は、自動的にそれを行うことはできません

<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); 
}); 

にそれは動作しますが、私は1つに、すべてのプロパティを追加使用する必要があるコンポーネントのプロパティを反応させ、その後、私はまた、例えば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中：

---

EDIT

私はに私の解決策を変更しました

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); 
}); 

正常に動作します。これは非常に明確な解決策ではありませんが、私はその合理的な印象を持っています。 JSXのように、コンポーネント名をhtmlコードに設定し、小道具を追加することができます。

Answer 1

私が知る限り、JSXコンポーネントをブレードテンプレートと直接混在させることはできません。現在Reactで利用可能なサーバー側のレンダリングはNodeJSだけです。 アーキテクチャを改善するためにできることは、特定のIDを持つ特定のHTMLタグを追加し、その中に反応コンポーネントをレンダリングすることです。これは、その反応成分のため、ご使用のブレード・テンプレートにプレースホルダとして機能します

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

：だから、ブレードの内側に、あなたのような何かを行うことができます。この場合には反応し、ブレイドの世界の世界は異なる時間に実行することを忘れないでください

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

：次に、あなたのcomponentAは、このようなあなたのapp.jsからレンダリングします。