I'm attempting to use react-dnd and react-big-calendar with drag-n-drop support (using react-dnd under the hood as well) in an app together. However, if I initiate them separately, I get an error:
Uncaught Error: Cannot have two HTML5 backends at the same time.
Here's the code:
App.js
import React from 'react'
import {DragDropContext} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import Calendar from './Calendar'
class App extends React.Component {
render() {
return {
<div>
...
<Calendar />
</div>
}
}
}
export default DragDropContext(HTML5Backend)(App)
Calendar.js
import React from 'react'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
const Calendar = withDragAndDrop(BigCalendar)
...
react-big-calendar documentation mentions that the withDragAndDrop() function can accept a backend as a second argument, meaning, in theory, I should be able to retrieve the backend instance that I have already set for react-dnd and pass it as an argument. However, I'm not sure how I retrieve the backend instance.
react-dnd documentation for DragDropContext mentions an instance method getManager() which should help me retrieve the backend (getManager().getBackend()). However, the key here is instance method. How do I get the instance of DragDropContext(HTML5Backend)(App) from my Calendar.js file?
Related
I've a problem by serving the resource via a json feed in fullcalendar scheduler with react. The feed works in the normal fullcalendar scheduler without react.
import React from 'react';
import FullCalendar from '#fullcalendar/react';
import resourceTimelinePlugin from '#fullcalendar/resource-timeline';
import calendarInteraction from '#fullcalendar/interaction';
class Calendar extends React.Component {
state = {};
render() {
return (
<div>
<FullCalendar
schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
plugins={[calendarInteraction, resourceTimelinePlugin]}
initialView={'resourceTimelineMonth'}
selectable={true}
editable={true}
resourceAreaWidth={'10%'}
resources={"localhost/resources"}
/>
</div>
);
}
}
export default Calendar;
I get the following error in the console:
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the CalendarDataProvider component.
It looks like a react problem, but I'm not getting it. Where does the fullcalendar react "plugin" save the state of the resources?
Sorry, I've found the answer:
It seems you have to explicitly give an absolute URL in the react fullcalendar but the fullcalendar version without react works also with non explicit URLs.
So resources={"http://localhost/resources"} works. And resources={"localhost/resources"} doesn't work!
Thanks to #ADyson who gave the answer.
React is not resolving my component import into my YouTubeApp.js.
It seems silly, i have other components in my react app that I'm able to import with no issues but this one in particular i can't get it imported.
Github: https://github.com/JAlonsoHdz/React_UnsplashClientApp/tree/master/src/components
Additional context, YouTubeApp.js is currently imported in my index.js with no issues. I'm using react routing imported in the index.js and links and the route links sucessfully to YouTubeApp.js. The problem arise whenver I try to import ANY component into YouTubeApp.js i get the Cannot resolve 'component name' error, without any imports the component YouTubeApp.js works fine.
I have validated the correct path, the name of the component.
YouTubeApp.js
import React from 'react';
import Other from './components/other';
class YouTubeApp extends React.Component {
render() {
return (<p>test</p>
);
}
}
export default YouTubeApp;
And this is my component I'm trying to import:
import React from 'react';
class Other extends React.Component {
render() {
return (
<div clasNames="ui container">test!</div>
);
}
}
export default Other;
I need to nest at least a few levels down more components but this issue blocking.
Looking at your GitHub repository, it appears that YouTubeApp.js and other.js are both in the "components" directory. Therefore when in YouTubeApp.js (or any other component in your "components" directory) your import should be:
import Other from './other';
I'm pretty new to rxjs, and trying to understand what's needed here to expose the Chat object in the Bot Framework, as I need to call some methods in it I'll add. I essentially need access to the created Chat component from the webpage, which right now has a BotChat.App. There's also a BotChat.Chat, but that doesn't seem to be the instance I need access to.
The following is used from the Bot Framework by calling BotChat.App({params});
That in turn creates a Chat component (eventually in App.tsx below). I need to basically expose the Chat instance that is used, as I want to modify it.
BotChat.ts (Complete)
export { App, AppProps } from './App';
export { Chat, ChatProps } from './Chat';
export * from 'botframework-directlinejs';
export { queryParams } from './Attachment';
export { SpeechOptions } from './SpeechOptions'
export { Speech } from './SpeechModule'
import { FormatOptions } from './Types';
// below are shims for compatibility with old browsers (IE 10 being the main culprit)
import 'core-js/modules/es6.string.starts-with';
import 'core-js/modules/es6.array.find';
import 'core-js/modules/es6.array.find-index';
And here in App.tsx note the Chat component used below. That is what I need to expose up through the webpage. A bit confused as to if it's exporting a "Chat" type as opposed to getting access to the instance of Chat being used in App.tsx. Hope this makes some sense :)
App.tsx (Complete)
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Chat, ChatProps } from './Chat';
import * as konsole from './Konsole';
export type AppProps = ChatProps;
export const App = (props: AppProps, container: HTMLElement) => {
konsole.log("BotChat.App props", props);
ReactDOM.render(React.createElement(AppContainer, props), container);
}
const AppContainer = (props: AppProps) =>
<div className="wc-app">
<Chat { ...props } /> //<--------------This is what I want to get
//access to on the webpage, which currently
//only uses BotChat.App() to initialize the
//web chat control. Not sure how to expose
//this _instance_ to App.tsx and then expose
//that instance to the webpage.
</div>;
Web Chat has a Redux store and a RxJS stream that you can expose to interact with the <Chat> component. In React, you can, but people usually don't expose any functions out of it. Short reason: the contract of a React component is props, not functions.
For RxJS stream that you can access the chat history, you can look at the backchannel sample. But it's a read-only stream.
For other interactivities, look at Store.ts to see what actions it is using. Then, expose the Redux store at Chat.ts (easy hack: thru window variable, better: make a callback props at <Chat>).
If you need more interactivities that is not in the existing Redux actions, feel free to add some more. For example, this pull request should give you a sense of injecting chat history.
I'm trying to setup a project using React router v4, which i managed to made it work just fine.
However, when I try to implement the function to scroll back to the top, according to this docs, there is this error:
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
I already downloaded the React prop-types package. This error only appears if I set withRouter() within the component, for example:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';
class ScrollTop extends Component {
componentDidUpdate(prevProps) {
if ( this.props.location !== prevProps.location ) {
window.scrollTo(0, 0);
}
}
render() {
return (
<div>{ this.props.children }</div>
);
}
}
export default withRouter(ScrollTop);
The code above will generate the error. But if I use the code below:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ScrollTop extends Component {
// ..same as code above..
}
export default ScrollTop;
This doesn't present the error, but also doesn't scroll back to the top when changing routes.
How can I solve this proble? Or what did I do wrong?
React 15.5.0 added this deprecation warning. Even though you are importing PropTypes from its new location, the latest release react router v4 is not. A PR for it has already been merged, but has not yet been released.
Your options are to wait for react-router to publish the release (I would expect that should be pretty soon), install react-router from master, or downgrade React to 15.4.0 temporarily.
I create a new React Native project and install #shoutem/ui in project and include the Examples component of Shoutem UI into React Native app.
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { Examples } from '#shoutem/ui';
class HelloWorld extends Component {
render() {
return (
<Examples />
);
}
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
But when I run start the project , I get "Unknown named module: 'react/lib/NativeMethodsMixin'" error.
The bug seems to be inside the #shoutem/animation module, in the Parallax.js file: https://github.com/shoutem/animation/blob/develop/Parallax.js
NativeMethodsMixin is not imported correctly from react:
If you change this:
import NativeMethodsMixin from 'react/lib/NativeMethodsMixin';
to this: import NativeMethodsMixin from 'react';
your app should work.
I would either file a Github issue on the #shoutem/animation project or check if the way NativeMethodsMixin is imported is specific to an older version of react and then use that version in your app.
I hope this helps.
This is fixed as of v0.8.9 release of #shoutem/animation.