react.rb icon indicating copy to clipboard operation
react.rb copied to clipboard

automate .as_node.to_n should be applied when elements are passed to native components.

Open catmando opened this issue 9 years ago • 1 comments

currently if you do this:

  # Rb is native ReactBootstrap 
  class TooltipExample < React::Component::Base
    def render
      tip = Rb.Tooltip(id: 'foo'){'a tooltip'}.
      div {
        h2 { 'Tooltip Example'}
        Rb.ButtonToolbar {
          MyComponent(placement: :top, overlay: tip) {
            Rb.Button { 'has tooltip' }
          }
          Rb.Button { 'no tooltip' }
        }
      }
    end
  end

It works fine: I.e the tip Element is automatically removed from the rendering buffer when it is passed to MyComponent.

But if you change MyComponent to a native component, you have to remember to remove the node, and convert it to a native JS object.

  class TooltipExample < React::Component::Base
    def render
      tip = Rb.Tooltip(id: 'foo'){'a tooltip'}.as_node.to_n
      div {
        h2 { 'Tooltip Example'}
        Rb.ButtonToolbar {
          Rb.OverlayTrigger(placement: :top, overlay: tip) {
            Rb.Button { 'has tooltip' }
          }
          Rb.Button { 'no tooltip' }
        }
      }
    end
  end

This is because the React::RenderingContext.remove_nodes_from_args method is called at the beginning of React::RenderingContext.render. Instead we should do this processing when args are PASSED, and during the check do the .to_n processing if the component is native.

catmando avatar Jan 21 '16 23:01 catmando

This issue was moved to reactrb/reactrb#122

sollycatprint avatar Jun 13 '16 13:06 sollycatprint