logo
down
shadow

How do you createRef in Suave Fable?


How do you createRef in Suave Fable?

By : Einar
Date : October 24 2020, 06:10 PM
fixed the issue. Will look into that further createRef is available only since version 5.x something so you need to update to latest version. To be sure, I encourage you to upgrade to the latest version at the time of writing 5.2.3.
This means you will need to upgrade your application to Fable.Core v3, you can read more about it here.
code :
open Fable.React
open Fable.React.Props

type MapComponent(initProps) =
    inherit Fable.React.Component<MapComponentProps, obj>(initProps)

    let mapRef : IRefHook<Browser.Types.HTMLDivElement option> = createRef None

    override this.render() =
        div [ RefValue mapRef ]
            [ str "..." ]


Share : facebook icon twitter icon
React.createRef() not works

React.createRef() not works


By : iizii
Date : March 29 2020, 07:55 AM
I hope this helps you . This is likely due to your ref not being fully initialised after the first render, meaning that when onClick is invoked, your're technically "logging" an cached copy of an uninitialised value.
Consider making the following change to cause the initialised and "current" ref to be accessed during the onClick event:
code :
export default class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    // const node = this.myRef.current; <-- Remove this
    return (
      <React.Fragment>
        <ChildComponent ref={this.myRef} />
        <button
          onClick={() => {
            // Move to here, causes the current ref to be accessed during onClick
            const node = this.myRef.current;
            console.log(node);
          }}
        >
          Run Me
        </button>
      </React.Fragment>
    );
  }
}
How to use Fable compiler without webpack fable-loader?

How to use Fable compiler without webpack fable-loader?


By : icedoor
Date : March 29 2020, 07:55 AM
I hope this helps . You can do this by using the fable-splitter package instead of fable-compiler.
Using this is as simple as fable-splitter myProject.fsproj -o outputDir
React.createRef always null

React.createRef always null


By : Hasib Ul Sakib
Date : March 29 2020, 07:55 AM
may help you . omg, I was on react 16.3 but react-dom 16.2. bumping react-dom to 16.3 fixed the issue.
How to use createRef() instead of this.refs?

How to use createRef() instead of this.refs?


By : intekhab
Date : March 29 2020, 07:55 AM
With these it helps The main difference between string constants and createRef is createRef stores data in current field, as string constant stores it in this.refs[stringConstant].
So your code could be:
code :
class App extends Component {
    constructor(props) {
      this.notifRef = React.createRef();
    }
    myFunc(){
        this.notifRef.current.notificationAlert(options);
    }

  render() {
    return (
      <div>
          <NotificationAlert ref={this.notifRef} />
        <button onClick={() => this.myFunc()}>Hey</button>
      </div>
    );
  }
}
_react3.default.createref is not a function.(In '_react2.default.createRef()'_react2.default.createRef is undefined

_react3.default.createref is not a function.(In '_react2.default.createRef()'_react2.default.createRef is undefined


By : KPrasad
Date : March 29 2020, 07:55 AM
I hope this helps you . You are using an old version of react. The createRef API was added in React 16.3.0 and you are using 16.2.0. Release notes here
It seems that this new API is being called from one of your dependencies, as the stacktrace mentions Instagram.js, you need to either update React, or change or downgrade that dependency.
Related Posts Related Posts :
  • How not to output default T4 generated file?
  • RichTextBox EnableAutoDragDrop=true requires CTRL key pressed when dropping a ListBox item?
  • How can I get Symbolic-Name of an Osgi bundle which is using one of my exported packages?
  • Get network address of a file in AppleScript
  • What is purpose of T4 Generator in T4toolbox
  • How to correctly formalize the command line usage of GNU/Linux commands?
  • What's the difference between a UseCase and a Workflow?
  • How to write a virtual machine
  • NServiceBus FullDuplex sample compiled and debugging against .NET 4.0 framework throws exception
  • Glade: How do I pass more than one argument to a signal handler?
  • Case statements in VHDL
  • New NSData with range of old NSData maintaining bytes
  • How do I convert a column of text URLs into active hyperlinks in Excel?
  • serial port parity
  • @Override fix-code shortcut in NetBeans
  • Import small number of records from a very large CSV file in Biztalk 2006
  • How to clear browser's cache from server side?
  • Execute remote Lua Script
  • Website.com/cpanel access
  • Which LOGO implementation?
  • How to add files to a document library in a site definition in SharePoint 2007?
  • JavaFX layouts question
  • Is it possible to access variable of subclass using object of superclass in polymorphism
  • How can the reliability of Software be checked through analysis?
  • Prototype Multi-Event Observation for Multi-Elements
  • maximum stored proc name in firebird
  • AutoComplete implementation
  • How is it that i am getting two different open ids for the same site for the same user
  • Revision histories and documenting changes
  • How to use Int13H Ext to read /write all sectors on each partition of harddisk (>8GB)
  • Dijit.Dialog 1.4, setting size is limited to 600x400 no matter what size I set it
  • Windows Phone 7 Notifications/Pop/Toasts
  • StructureMap: "No default instance of plugin defined" - even though it is
  • Getting HTTPS working with Traefik and GCE Ingress
  • flask with bootstrap4, not show modal, use CDN works well
  • How to get the formatted view of YQL as result?
  • wsadmin is taking 10 minutes to connect to Application Server
  • TCL array values updation based on command line argument
  • Wordpress: help with posts_nav_link()
  • how to retrieve information from deleted row
  • How does one align code (braces, parens etc) in vi?
  • Are there videos/tutorials that show one or more technical SAP upgrade tasks from 46C R/3 to ECC 6.0?
  • Are there any B-tree programs or sites that show visually how a B-tree works
  • Couple o' quick questions on Apache Lucene
  • how to add hyperlink to particular node of tree in ext js
  • Number sequence in AXAPTA
  • Using Zope object unique id ( _p_oid ) to access object itself
  • Work with protocol OAuth without browser?
  • Searching Amazon only returns 10 items
  • Whois list of Top Level Domain against their corresponding registrar
  • How to bring perforce client work space into sync with depot as of specific time of a specific date
  • How is a neural network called that is NOT convolutional
  • How to convert WSDL file to class file
  • iPhone Safari does not auto scale back down on portrait->landscape->portrait
  • how to build rabbitmq C client lib on windows
  • UITableView hide sectionindex but retain sections
  • Good .net4 profiler
  • UNIX Signal lost
  • How do I exclude the sources jar in mvn deploy?
  • RCP update site for multiple platforms
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk