Flexgrid reactjs context passthrough

Flexgrid reactjs context passthrough

Posted by: austinnichols on 14 September 2017, 11:39 am EST

• 

  austinnichols

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:39 am EST

  I’ve found a problem using the Wijmo 5 Flexgrid within a react project. Specifically, any components (and their children) that are rendered within a flexgrid cell are unable to access react context.

  The following article has a very good explanation of how react context works.
  
  ref: the-land-of-undocumented-react-js-the-context

  I’m using an item formatter to create a react component within a flexgrid. Here’s an example in LiveScript:

  
  # ID Column
  if panel.columns[c].name == \id
  
    # Get the unformatted cell data
    cell-data = parse-int(flex.get-cell-data(r,c, false))
    render-data = React.render-to-static-markup (create CellWrapper, router:@context.router, cell-data: cell-data)
  
    if cell-data != render-data
      cell.innerHTML = render-data
  

  Note that I’m passing through router as one of the parameters. This is a workaround for the context issue. I’m picking up router from context while I’m above the flexgrid and then placing the value back in context below (within the cell) the flexgrid…

  module.exports = React.create-class do
  
    display-name: 'Cell Wrapper'
    prop-types:
      router: React.PropTypes.func.is-required
      cell-data: React.PropTypes.number.is-required
  
    # Make router visible to children as context
    child-context-types:
       router: React.PropTypes.func.is-required
  
    # Called whenever state or props changes
    get-child-context: -> do
      router: @props.router
  
    render: ->
      ...
  

  As you can see, there’s quite a bit of additional code required (child-context-types, get-child-context and passing the values as props) just to be able to make a single context value available to any react components that are children of the flexgrid.

  IMO, this should be handled transparently by the flexgrid with app context accessible to flexgrid children without any extra code.

• 

  bernardo

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 11:39 am EST

  Hello Austin

  Some intro first: The FlexGrid is a pure JS control. It can be used with any application framework, but it knows nothing about any of them.

  We do ship “interop” modules that provide framework-specific wrappers for Wijmo controls. Currently, we have include “official” interop modules for Anggular 1.x, 2.x, and KnockoutJS. We are working on additional interop modules for Rect and Vue. Those should be available soon.

  You can see a preview of our React interop here:

  http://bernardo-castilho.github.io/WijmoReact/default.htm
  

  And there’s a short blog here:

  http://wijmo.com/blog/how-to-use-wijmo-controls-in-reactjs-apps/
  

  Now on to your question, with a caveat first: I am not a React expert

  Based on the React documentation, the context feature is a new addition provides “global variables” to applications. Anything included in the context will be accessible to all components independent of their position in the document tree. This scheme can simplify things because a “parent” component can provide a context that other components can consume, without passing the information through the entire component hierarchy one level at a time.

  The React docs state that you can make the context available to components simply by setting their “contextTypes” property as in

  const Button = ({children}, context) =>
    <button style={{background: context.color}}>
      {children}
    </button>;
  Button.contextTypes = {color: React.PropTypes.string};
  

  I assume you can do this with other components the same way, e.g.

  
  CellWrapper.contextTypes = { whatever you want to share }
  

  And then the context information would be available to your component.

  I hope this helps at least a little.

  If you have any more feedback or would like to discuss our upcoming React interop, please do let me know.

• 

  liana.melissa12

  • Post Options:
  • Link
    Copy

  Posted 1 February 2019, 2:27 am EST

  Hi, this is Liana trained on React.js, go through the below article it will helpful for you.
  
  https://dev.to/washingtonsteven/reacts-new-context-api-and-actions-446o. https://bit.ly/2HKbO8Q