Question

使用时，如何将道具或数据传递给组件 javascript_pack_tag代码？

目前

/application.html.erb
<%= javascript_pack_tag 'flash_messages', data: {messages: flash_messages} %>

Answer 1

可以通过几种方式完成。

1。您可以“手动”传递道具

document.addEventListener('DOMContentLoaded', () => {
  const node = document.getElementById('flash_messages_data')
  const data = JSON.parse(node.getAttribute('data'))
   ReactDOM.render(
     <FlashMessages messages={data} />,
     document.body.appendChild(document.createElement('div')),
   )
  })

或者您可以使用gem，它的功能基本上相同： https://github.com/renchap/webpacker-react

在您看来

<%= react_component('FlashMessages', { messages: [] }) %>
<%= javascript_pack_tag 'components/flash_messages' %>

以及您的组件中

import React, { Component } from 'react'
import WebpackerReact from 'webpacker-react'

class FlashMessages extends Component {
  ...
  render() {}
}

WebpackerReact.setup({FlashMessages}) // ES6 shorthand for {Hello: Hello}

最后一行基本上分析了react_component助手生成的数据属性，并传递给您的组件。

Answer 2

    <%= javascript_pack_tag 'CropImages' %>
    <%= content_tag :div,
      id: "appointments_data",
      data: @product.to_json,
      front_image: url_for(@product.front_image), 
      back_image: url_for(@product.back_image) do %>
   <% end %>

反应成分：

document.addEventListener('DOMContentLoaded', () => { 
const node = document.getElementById('appointments_data')
const data = JSON.parse(node.getAttribute('data'))
const frontImage = node.getAttribute('front_image')
const backImage = node.getAttribute('back_image')
ReactDOM.render(
  <CropImages data={data} front_image={frontImage} back_image={backImage} />,
  document.body.appendChild(document.createElement('div')),
)
})

将道具传递给webpacker会对rails 5.1中的组件做出反应

2 个答案: