Reactjs 如何安全地将参数传递到带有react rails的react组件

Reactjs 如何安全地将参数传递到带有react rails的react组件,reactjs,react-rails,Reactjs,React Rails,我正在使用react-rails向现有RubyonRails应用程序添加一些react组件。我刚刚意识到,如果您检查组件,那么很容易看到最初传递给组件的所有道具 <%= react_component('ProfileWeeklyWriting', { languages: @user.languages, currentUser: @current_user, responses: @writing_responses, clapLottie: asset

我正在使用react-rails向现有RubyonRails应用程序添加一些react组件。我刚刚意识到,如果您检查组件,那么很容易看到最初传递给组件的所有道具

<%= 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')
    }) %>
但是当您检查元素时,所有这些变量都会显示出来


我知道我可以从组件内部进行ajax调用,但是有没有一种方法可以在不向外界显示的情况下将变量最初传递给组件?

让我们了解一下它是如何工作的。当您在没有任何后端引擎的情况下执行经典SPA时,您通常会执行以下操作

ReactDOM.render(<App />, document.getElementByID('root'))
然后DOM就准备好了

document.addEventListener('DOMContentLoaded', e => {
  init()
})
儿子,事实上Rails对React一无所知,React也对Rails一无所知,除非它不是住在窗户上。这种方法极不可取

在现实世界中,有一些方法可以进行服务器渲染,这意味着这段代码是在服务器上完成的,不公开道具和整个生命周期,只需将真正准备好的HTML刷新到DOM中。这意味着在HTML发送到客户机之前的生命周期中,有一个叫做transpiler的程序来编译这些组件,您可以在这里阅读

因此,它只是在函数的帮助下调用这些方法


因此,不向客户机公开道具的唯一方法是通过某个引擎在后端预先呈现组件,可以是针对您的语言的某个JS实现,也可以是直接在node.JS后端呈现。我希望我给了你一个更好的画面,它是如何工作的,它是如何解决的

Huuum,当我试图在react_组件标志中将prerender设置为true时,数据react道具仍然存在。。
document.addEventListener('DOMContentLoaded', e => {
  init()
})