I can use this way to prevent undefined error when the object is undefined , but it not work in React. i want to know is this ES6’syntax or other syntax?
The safe navigation operator is a feature of Angular, and not part of the JavaScript langauge. As a result, it will not work in React applications.
Related
I would like to update a project built in Ember 3.28 without Octane to version 4.4.
I tried using ember-cli-update to change version and now all sorts of errors are thrown, such as template properties that must be used with # and curly brackets components no longer supported...
I am new to Ember and I haven't understood if it is still possible to use the classic syntax on 4.4, if so, how can I continue to use the classic syntax? Especially on templates.
Thank you!
I am new to Ember
Hello! and welcome!!
is still possible to use the classic syntax on 4.4,
it is not possible to use some classic syntax after Ember 4.0.
In particular, when you have {{theseThings}} you must:
have theseThings defined in scope (like in strict mode, or via let, or component yield)
{{#let ... as |theseThings|}}
{{theseThings}}
{{/let}}
or
<Foo as |theseThings|>
{{theseThigs}}
</Foo>
change the invocation to be declared as an:
argument (prepend a #, so {{#theseThings}})
local variable on "the context" (this / the class instance), so: {{this.theseThings}}
There is a codemod to help out with these things, but it's a bit finnicky, and you'll want to go file-by-file:
https://github.com/ember-codemods/ember-no-implicit-this-codemod
https://github.com/ember-codemods/ember-angle-brackets-codemod/
I am trying to build a component to handle the editing of a substructure of my data. This piece of data is an object but in the main object, it is optional. So when invoking component I am trying to use the ?? operator to pass in an empty object to avoid access of undef issue. I would also like to be able to use the ?. operator for the same reason. Like so.
<template>
<my-sub-component :value="value.scf_rule??{}" />
</template>
However, Vuejs doesn't really like the question marks in the HTML attributes on my template. I get the following error:
Syntax Error: SyntaxError: Unexpected token (1:93)
This should be a really simple lookup on the web but I have been looking for quite a while and it's not easy. It doesn't help that searching for question marks isn't really possible.
I've tried escaping it with a backslash, that doesn't seem to work. Anyone know how I can have an expression in my attribute that uses the question mark operator? I suppose I could define my own nvl utility function but that seems a tad silly.
If you remove any kind of build stack from the equation, you can use whatever your platform supports. Your browser then will run the code just as you author it.
Otherwise you are limited to what the acorn parser version used by your webpack/bundler supports (usually everything finalized in the spec and proposals that have reached stage 4). With Vue, you're probably using webpack.
If you are fine with your code being transpiled to older JS versions, use Babel along with the necessary plugins 1 2.
I'm trying to work with this react-native library, and in the documentation it says this:
Initialize Library
Somewhere high up in your project and way before calling any other method exposed by this library, your index file or equivalent is a good spot, ensure you initialize the library with your public key as follows:
import RNPaystack from 'react-native-paystack';
RNPaystack.init({ publicKey: 'YOUR_PUBLIC_KEY_HERE' });
How do I do this, without getting null object is not a function.
In my app.js I tried it with useEffect, tried with componentwillmount , tried several ways, same error.
I feel I'm doing it wrongly.
Can someone tell how to initialize a library properly in react native.
Thanks :)
This is most likely happening because you haven't linked the native modules properly. That's expected as you mentioned you're using Expo, which doesn't allow you to add custom native code. If you want to use this library, you'll have to eject from Expo. See the docs.
How does a frameworks like Vue implement their own custom syntaxes within an HTML document?
So I want to create a template engine, consequently I need to know how to implement my own custom syntax. I thought that an easy one would be the double curlys that can be used in Vue. Example of curlys:
<h1>{{pageTitle}}</h1>
My first thought was to use `String.prototype.replaceAll(regex, string); but I got stuck at the regex I would use. In fact thinking about it now, I probably need a dynamic regular expression maybe?
p.replaceAll(/\{\{()\}\}/g, '<p>{{embeddedVar}}</p>')
The other option I considered was a parser, or a lexer, but I didn't even know where to start. I built them in school in C++. I thought maybe NPM has one pre-built?
It seems like several developers have wrote their own custom template engine that has built-in support for the double curly brackets. I was thinking that maybe there is a common way that its being implemented.
The Vue syntax is indeed not understood by the browser. the work is done by the Vue library that's imported in every Vue app.
The original markup (with the curly braces showing up) can even be seen for a split second when the page is loading, and this is because Vue hasn't loaded up all the way yet.
I am using Reactjs via JSX. Is there any safe navigation operator to use in this method? I tried using question mark operator like "foo?.bar" but I got syntax error.
The safe navigation operator (aka. Elvis operator) is a proposal in draft status with TC39, so no. Not yet anyway (as of this writing).
But this ugly syntax will get you there without a library. Instead of ...
foo?.bar
... use this ...
(foo||{}).bar||{}
It's hard to read but it works and it isn't dependent on a library.
UPDATE: The proposal has reached stage 4, so it will be part of ES2020.
You can use from get method in lodash library, like this:
import { get } from 'lodash';
get(foo, 'bar1.bar2.bar3.bar4');
Now, there is a babel plugin called #babel/plugin-proposal-optional-chaining that solves this problem.