Как безопасно передавать параметры для реагирования компонента с реакторными рельсами - PullRequest
Новая
       45

Как безопасно передавать параметры для реагирования компонента с реакторными рельсами

0 голосов
/ 24 января 2019

Я использую реактивные рельсы, чтобы добавить некоторые реактивные компоненты в существующее приложение ruby ​​on rails. Я только что понял, что все реквизиты, изначально передаваемые компоненту, легко увидеть, если вы осмотрите компонент 

<%= react_component('ProfileWeeklyWriting', {
    languages: @user.languages,
    currentUser: @current_user,
    responses: @writing_responses,
    clapLottie: asset_url('lottie/clap.json'),
    clapIcon: asset_url('icons/clap.svg'),
    arrowIcon: asset_url('icons/arrow_green.png')
    }) %>

Но когда вы проверяете элемент, все эти переменные отображаются!

enter image description here

Я знаю, что могу просто выполнить ajax-вызов из компонента, но есть ли способ изначально передать переменные в компонент, без их показа миру?

1 Ответ

0 голосов
/ 24 января 2019

Давайте немного расскажем о том, как это работает.Когда вы выполняете классический SPA без какого-либо внутреннего механизма, вы обычно делаете что-то вроде 

ReactDOM.render(<App />, document.getElementByID('root'))

, что просто отображает корневой компонент вместо <div id="root" />.Когда вы применяете шаблоны Rails сверху, вы соединяете 2 разных мира.ReactDOM и тонкий шаблонизатор Rails (вероятно), но они ничего не знают друг о друге.ReactRails - это на самом деле просто подпрограмма, которая выполняет что-то вроде этого:

  • 1 Внедрить пользовательский сценарий response-rails на страницу
  • Ожидание готовности DOM
  • Собрать все [data-react-class] elements
  • Итерируйте их и вызывайте ReactDOM с реквизитом.

Вы можете думать об этом, как о вызове нескольких «мини-приложений», но на самом деле это только компоненты (реакция не различает приложение / компонент, это всегда просто компонент)

Таким образом, код выглядит примерно так (я не проверял исходный код, но написал собственную реализацию react-rails для своей компании) 

  function init () {
    const elements = document.querySelectorAll('[data-react-class]')

    if (elements.length > 0) {
      Array.prototype.forEach.call(elements, node => {
        if (node) {
          mount(node)
        }
      })
    }
  }

  function mount(node) {
    const { reactClass, reactProps } = node.dataset 
    const props = JSON.parse(reactProps || '{}')
    const child = React.createElement(window[reactClass], props)
    ReactDOM.render(child, node)
  }

Тогда DOM готов 

document.addEventListener('DOMContentLoaded', e => {
  init()
})

Сын на самом деле Rails ничего не знает о React, и React ничего не знает о Rails, если он не живет на window.(ЭТОТ МЕТОД ВЫСОКО ОБНОВЛЕН.ДГОРедактировать HTML для DOM.Это означает, что в жизненном цикле ПЕРЕД HTML отправляется клиенту, существует так называемый транспортер, который компилирует эти компоненты, вы можете прочитать об этом здесь

  1. https://github.com/reactjs/react-rails#server-side-rendering

Так что он просто вызывает эти методы с помощью https://github.com/rails/execjs

Так что единственный способ, как «не выставлять» реквизиты клиенту, - это «предварительно визуализировать» компоненты на бэкэнде с помощьюкакой-то движок (либо некоторая реализация JS для вашего языка, либо непосредственно серверная часть node.js).Я надеюсь, что дал вам лучшую картину, как это работает и как это можно решить!

...