Hi I am quite new to reactjs but I started to understand few things. But this one giving me a headache, I have a small reactjs component that will be added in an existing site. The problem is inside my component I wanted to use a function in a JS file that is declared masterpage of the site. The name of the function I want to access is "SPClientPeoplePicker_InitStandaloneControlWrapper", so whenever I build my component I get the following error :
'SPClientPeoplePicker_InitStandaloneControlWrapper' is not defined no-undef
I tried using windom.SPClientPeoplePicker_InitStandaloneControlWrapper but the problem is in window "SPClientPeoplePicker_InitStandaloneControlWrapper" is giving me a different function. It would be nice if that library can be scoped inside my component
I tried calling library using import but it didnt work
import clientforms from "https://standardsSite.com/_layouts/15/clienttemplates.js";
I solve the problem I use loadjs its very handy.
loadjs(
[
"https://mysharepointsite.com/_layouts/15/clienttemplates.js",
"https://mysharepointsite.com/_layouts/15/clientforms.js",
"https://mysharepointsite.com/_layouts/15/clientpeoplepicker.js",
"https://mysharepointsite.com/_layouts/15/autofill.js"
],
"SPLibrary"
);
let self = this;
loadjs.ready("SPLibrary", function() {
self.handleSubmit(self.props.name);
});
Related
So I'm trying to build a prototype on React w/ TypeScript for an application that I'm developing - which in the future I'm going to migrate to Django, that's why I want to use web3js, to pass it later to web3.py - and a I wanna use the relay methods of Infura, so the users don't need to have a cryptowallet.
How I'm trying to do it is by following the Infura tutorial on ITX and getting everything on web3js. Right now what I have is this:
//Configure the provider
let web3 = new Web3(
new Web3.providers.HttpProvider(
`https://:${process.env.REACT_APP_PROJECT_SECRET}#${process.env.REACT_APP_ETHEREUM_NETWORK}.infura.io/v3/${process.env.REACT_APP_PROJECT_ID}`
)
);
web3.extend({
property: "relay",
methods: [
{
name: "getBalance",
call: "relay_getBalance",
params: 1
},
],
})
This is what I do at the start of the React component. Later, I wanna have a callback that, when I want, it'll retrieve the balance of the gas pool so it'll be something like:
() => web3.relay.getBalance(...)
The problem is that, when I try to use it like that, as the property doesn't exist on the Web3 class, I can't compile it. Is there a way to extend the class definition so I can define - and use - the relay methods inside its own module? I've tried with JS and works fine, but I would really like to keep the project on TS.
I'm having some trouble with a piece of code in React.
I've created a gh repo that reproduce the error : https://github.com/AnatoleLucet/next-issue
I'm trying to do a hook that gets some local data (in my real app it's a translation system, but you get the idea). Thing is, I pass each "part" of my data (see data/myData.ts and data/index.ts) in a function called formatData, this function is declared in the same file as my hook (hooks/myHook.ts). Then when I use my hook in a component (see pages/index.tsx) I get the following error :
I don't understand why the browser (or webpack ?) doesn't initialize formatData at the right time...
I'm using Nextjs but I don't think it's related to the issue, although I haven't tried on a "vanilla" React project.
As a temporary fix, I can move formatData to another file like utils/data.ts.
You have a circular dependency.
hooks/myHook.ts imports from data/index.ts
data/index.ts imports from data/myData.ts
data/myData.ts imports from hooks/myHook.ts
Are there any code samples that show how to use Surveyjs with React and TypeScript? I tried importing it into my project and using the sample code from here.
https://stackblitz.com/edit/surveyjs-react-stackoverflow45544026
I got a module parse error on this line.
import "survey-react/survey.css";
So, I tried commenting it out to see what would happen. Then, TypeScript complained about this line
var model = new Survey.Model(json);
It said Model does not exist.
My project contains the type definitions in survey.react.d.ts. So, I'm not sure what the issue is.
Thanks,
Mike
I use Surveyjs in Angular which uses TypeScript.
I generally do : import * as Survey from "survey-angular"; and we dont any errors like Model does not exist etc.
I would suggest you to try out: import * as Survey from "survey-react"; and check if its working.
Also, if you want quick start boilerplate of React+Surveyjs , you clone/fork from this link
Im passing some variables from outside of my react app (create-react-app) and it works fine on front end but I get build errors in webpack/npm? Because the variable doesn't exist (or it doesn't know about it).
I have this var in a var preloadTab = "x"; in my .net page
49:31 error 'preloadTab' is not defined no-undef
54:14 error 'preloadMsg' is not defined no-undef
I tried putting an undefined check around it but think its just flagging that instead now:
if (typeof preloadMsg !== 'undefined') {
if (preloadMsg != ""){
console.log(preloadMsg, "preloadMsg")
this.setState({preloadMsg: preloadMsg})
}
}
Whats the best way to pass a variable from outside the react "ecosystem" outside of an ajax call?
Sounds like you can make use of either getInitialState or by setting defaultProps for the component. Would either of those work for your case?
As azium already stated in a comment, another option would be to pass the data in as a prop. If you don't have access to the component, then you can save it as a global value either via window or using a constants file. Having a constants file is common in React apps and I would suggest this route over using window.
Am very new to react js and aurelia js, my requirement is use react for view and aurelia for model/routing and all. I refered this doc for installation, it works well. Done like this,here my view is in react js, while clicking the details in the table(doted icons),needs to call a function which should be in aurelia.
I followed the above mentioned doc for coding, instead of list in the my-react-element.jsx i changed into table style like in the pic.
Yeah, i got it. just understand passing value to components (custome-component in aurelia, component in react). In both, aurelia and react it works nearly same(like call-back function).
Code :
react-example.js Just declare a function, which you want to execute.
myfun(){
alert('Hi, am in aurelia..');
}
react-example.html use bind to set the declared function to custome-component.
<react-element myfun.bind = "myfun"></react-element>
react-example.js
#bindable('myfun')
<MyReactElement data={this.data} myfun={this.myfun}/>,
my-react-element.jsx
<p onClick = {this.try.bind(this)} >click </p>
try() {
this.props.myfun(); }
Note : Basic knowledge of react and aurelia required and compare the doc to fix.