2014-09-25 12 views
2

간단하게 필터링 할 수있는 항목 목록을 작성하는 데 ReactJS를 사용하고 있습니다.PHP에서 렌더링 반응 구성 요소

문제는 서버에서 SEO 이유로 마크 업을 렌더링해야하지만 React.renderComponent()을 호출하면 기존 마크 업을 React에 의해 생성 된 마크 업으로 대체합니다.)

React.renderComponent (당신이 전달 컨테이너 노드의 내용을 대체하는 미래, 기존에 구성 요소를 삽입 할 수 있습니다

나는이 쪽지를 발견의 문서 반응에서 검색. 기존 자식을 덮어 쓰지 않고 DOM 노드. 또한

내 백엔드는 PHP에서 실행되기 때문에 마크 업 서버 측을 생성하는 React.renderComponentToString()을 사용할 수 없습니다 ...

가 (현재의 출시와 함께이를 달성하기 위해 어떤 (심지어 hackish 경우) 방법이 있나요 0.11.2)?

renderComponentToString()에 의해 생성 된 마크 업과 함께 가능하다면 그 결과를 조롱 할 방법이 있어야한다고 생각합니다.

조언 해 주셔서 감사합니다.

답변

1

짧은 대답은 다음과 같습니다.

현명한 방법은 PHP가 렌더링을 요청할 수있는 노드 프로세스를 실행하는 것입니다. 특히 많이 캐시 된 페이지의 경우에는 나쁜 해결책이 아닙니다.

나는 매우 동적 인 방법으로 기능을 설정하세요

<?php 
function render_component_to_string($component, $data) 
{ 
    $url = "http://localhost:9000/components/" 
    . $component 
    . "?data=" 
    . rawurlencode(json_encode($data)); 
    return file_get_contents($url) 
} 
?> 
<div id="myFilteredList"> 
    <?= render_component_to_string("FilteredList", 
     array("items" => items, "title" => "My List")) ?> 
</div> 

Node.js를에서 : 물론

var app = require('express')(); // [email protected] 
var React = require('react'); 

// create a dictionary of components 
// Object.create(null) because the key is supplied 
var components = Object.create(null); 
components.FilteredList = require('./components/filtered-list.js'); 

app.get('/component/:componentName', function(req, res){ 
    var component = components[req.params.componentName]; 

    // safety first! 
    if (!component) { 
    console.error("Invalid component", req.params.componentName); 
    return res.send(404); 
    } 

    // more safety 
    try { 
    var data = JSON.parse(req.query.data); 
    } 
    catch (e) { 
    console.error("Invalid JSON", req.params.componentName, req.query.data); 
    return res.send(400); 
    } 

    // render and send the result back 
    try { 
    var result = React.renderComponentToString(component(data)); 
    } 
    catch (e) { 
    console.error('Could not render', req.params.componentName, 
        'with props', data); 
    console.error(e.message, '\n', e.stack); 
    return res.send(400); 
    } 
    res.send(result); 
}); 


app.listen(9000); 

이것은 당신의 구성 요소가 commonjs 모듈 가정합니다. 그렇지 않은 경우에도 이렇게해야합니다. 내가 어떤 실수를하면 내가 몇 년 동안 PHP를 사용하지 않은


, 그래서이 답변을 업데이트하십시오.

+0

길고 자세한 답변을 보내 주셔서 감사합니다. 이는 멋진 솔루션이지만 복잡성과 비용면에서 노드 서버에 대한 저조한 ​​요구라고 생각합니다. 이것이 내가 Marionette와 같은 기존 DOM 요소에 삽입 할 수 있도록 구성 요소를 다시 작성해야한다는 것을 두려워하는 상황입니다. 어쨌든, 나쁘다. React :( – Ingro

+0

웹 서버/PHP 응용 프로그램과 동일한 서버/vps에서이 작업을 수행 할 수있다. (localhost에서) 작동하는 방법이다. – FakeRainBrigand

+0

불행히도 최종 웹 사이트가 게시 될 웹 서버를 소유하지 않으므로 노드 응용 프로그램을 실행할 수 없습니다. – Ingro

7

당신은 그것은 PHP로 서버 측에 UI 구성 요소를 반응 렌더링 https://github.com/reactjs/react-php-v8js

볼 수 있습니다.

구현이 매우 간단하며 서버에서 V8Js PHP 확장을 설정할 수 있어야합니다.

관련 문제