2016-08-11 5 views
0

Я возвращаю компонент для изменения кода.Передача данных Node.js для ответа

Раньше я составлял его с помощью Jade и передавал текст из Jade global непосредственно в 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 

Теперь я делаю это с React и мне интересно, как передать данные в нее?

Если я const text = require('./texts.json'); внутри файла среагировать я получаю ошибку ...

Как передать данные из узла Реагировать таким же образом, как я сделал с Джейд? Возможно ли это только через Ajax на стороне клиента?

+0

вы можете использовать ' json-loader' https://github.com/webpack/json-loader, но, может быть, ваш вопрос скорее о экспрессе? –

+0

@ Daniel_L в этом случае весь json-файл со всеми языками будет загружен с помощью JavaScript прямо на клиента? Я хотел бы просто добавить правильную переведенную слова серверную сторону, чтобы уменьшить загруженные клиентом данные. – Rikard

+0

Я полагаю, я мог бы добавить атрибут 'data-text' с json-строкой в ​​элементе, где будет реагировать реакция ... но задайтесь вопросом, есть ли еще один более чистый способ. – Rikard

ответ

1

Ok, поэтому получать downvotes в вопросе я иду за ответ, который я нашел ...

Я закончил тем, передавая свою текстовую информацию в моем DOM элемент, который получит мой Реагировать компонент. Так в Джейд я сделал:

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

и по последним в React компоненте я сделал:

componentDidMount() { 
    console.log(this.props.text); // all here! 
} 
Смежные вопросы