2016-08-11 2 views
0

React 코드로 컴포넌트를 리팩토링하고 있습니다.Node.js 데이터를 React로 전달

이전에 나는 Jade와 함께 컴파일하고 Jade 글로벌의 텍스트를 HTML에 직접 전달하여 i18n 텍스트를 전달했습니다. 이런 식으로 뭔가 :

// in Node.js/Express 
const text = require('./assets/texts.json'); 
app.get('/route', (req, res) => { 
    render('page', text); 
}); 

과 옥에

내가 가진 것은 :

h3= text.en.title 
p= text.en.subtitle 

는 지금은 반작용으로이 일을하고 나는 그것을로 데이터를 전달하는 방법을 궁금해?

내가 오류를 얻을 반응 파일 내의 const text = require('./texts.json');을 ... 할 경우

어떻게 옥으로했던 것과 같은 방식으로 반응하는 노드로부터 데이터를 전달하는

? 이미 클라이언트 측에서 Ajax를 통해서만 가능합니까? 내가 찾은 대답을 이동 문제

+0

당신이 사용할 수 있습니다 옥에 그래서 내가 그랬어 :

- var words = ["calculate_price", "price_info", etc etc... ]; var text = words.reduce(function(obj, word){ return (obj[word] = lang[word], obj); }, {}); #dialog_wrapper(data-text= JSON.stringify(text)) 

및 파일에 나는 구성 요소 마운트 여기서 내가했던 반작용 구성 요소에

const dialogWrapper = document.getElementById('dialog_wrapper'); const dialogText = JSON.parse(dialogWrapper.dataset.text); ReactDOM.render(<BookingDialog text={dialogText}/>, dialogWrapper); 

마지막으로를 json-loader' https://github.com/webpack/json-loader,하지만 질문에 대한 자세한 내용은 아마도? –

+0

@Daniel_L이 경우 모든 언어가 포함 된 json 파일 전체가 자바 스크립트를 통해 클라이언트에로드됩니다. 클라이언트에 의해로드 된 데이터를 줄이기 위해 올바른 번역 된 단어 서버 쪽을 추가하고 싶습니다. – Rikard

+0

나는 반응을 일으킬 요소에 json 문자열이있는'data-text' 속성을 추가 할 수 있습니다 ...하지만 더 깨끗한 방법이 더 있을지 궁금합니다. – Rikard

답변

1

좋아, 그래서 점점 downvotes ...

나는 나의 반작용 구성 요소를 받게됩니다 내 DOM 요소에 내 텍스트 정보를 전달 끝났다. `

componentDidMount() { 
    console.log(this.props.text); // all here! 
} 
관련 문제