I am trying to mount a react component using jquery to a bootstrap modal body and then open the modal after a successful ajax request, however I cannot seem to get the react component to load. This is what I have so far:
After success I am calling the assignModal function, I am inside a parent react component.
assignModal: function(){
$('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>);
$("#vuln-assign-modal").modal('show');}
And here is the react component
Cortex.VulnerabilityList.AssignModal = React.createClass({
componentDidMount: function() {
console.log("Component mounted")
},
render: function() {
return (
<h1>Hello</h1>
)
}
});
From my experience, you're going to have trouble if you try to use both jQuery and React to manipulate the DOM. If it's at all an option for you, get rid of jQuery and fully embrace React's declarative programming paradigm.
But maybe you have jQuery widgets you want to use. In that case, try and design your app in such a way that jQuery never writes to the DOM within your React tree.
So a few options:
Use jQuery and React, but separately - Have your React app descending from some root <div> and have your modal in a sibling <div>. Then just use jQuery and normal HTML to render your modal without involving React.
Stop using jQuery - Use React to manage your modal. So instead of responding to assignModal by setting the innerHTML of a DOM element with jQuery, simply set some global state to showModal = true and in the render method of the modal if (!showModal) return null or something like that. I wrote a post about this recently.
Related
Could someone help me to create popover in ReactJS UI, Something like below image.
You can do this quite easy using one of the popular ui component frameworks. For example bootstrap/jquery.
Follow the steps below and you will be fine:
In render method of the parent component prepare html layout in accordance with guidelines for the component:
Toggle popover
In componentDidMount method of the parent component:
$("#mypopover").popover();
And finally in componentWillUnmount:
$("#mypopover").popover('destroy')
I have an old Angular1.5 app, quite a large code base.
I'm now using ngReact to instance React from within an angular directive.
This is all working correctly. My new react 'sub-app' for want of a better phrase is working ok.
But now I need to call an ng-click in part of the old Angular app from React. The Angular ng-click then pops up a modal. The ng-click in the controller is in scope so it's available i.e. it's module is loaded into the browser.
Any ideas how to do this ?
I do have Redux instanced in Angular using ngRedux and available in React, could I dispatch from React and get the controller to respond to this dispatch / action ?
Does this seem ok ?
The answer to my question is yes, I can use Redux and subscribe to the redux state change in the angular controller with something like this
var unsubscribeRedux = $ngRedux.connect(this.mapStateToThis, fireAddTaskEvent )(this);
$scope.$on('$destroy', unsubscribeRedux);
this.mapStateToThis = function(state) {
console.log("fired from react");
return {
value: state.addTasks
};
}
It's crude at the moment, but works
I am building an application using angular and redux (ngRedux). Now i want to use react instead of angular for improvement in performance. It is a huge application so it is not possible to build it from scratch. So i want to use the routing of angularJS (angular-ui-router) and as any "abc" state become active then the react component become load and this react component should use the pure redux against every single event.
How can i maintain my application accordingly that a single module is build in react-redux and connected to angular only through routing state. Keep in mind that the other modules of application should also not be disturbed.
Well to render React components into Angular is quite easy. But I just assume you use directiveor component from angular already.
So in the case of directive you could skip the whole templating "none sense" and let React handle that for you
module.directive("reactTest",function() {
return {
link:function(scope,element,attr) {
class App extends React.Component {
constructor(props) { super(props) }
render <div></div>
}
element.replace(App);
}
}
});
So this how you would get React into Angular. Redux ist basically the same. You simple use the connect function of redux and off you go.
I'm using react-slick slider and can't figure out how I can re-initialize the slider. With the jquery slick plugin, I can call $slick.reInit(), but using react I can't seem to do this. Is there something similar I can do in react to the reinit method?
There is no such feature for now, but there is a way to do it.
If you wrap Slick with a component and give it a unique key, slick reloads each time the key changes
render: function() {
return <div key={uniqueId}>
<CarouselComponent>
</div>;
}
I have a container div with some static HTML. I don't want my react router to do anything if default location is /. It expects a default view which I don't have. Is there an easy solution.
I tried this but it doesn't work with back/forward browser button?
var initApp = function() {
Router.run(routes, function(Handler) {
if(Router.HashLocation.getCurrentPath() !== '/') {
React.render(<Handler/>, document.getElementById('top-container'));
}
});
}
Seems hacky to suggest - but have you tried passing a mocked component (not inheriting from React.Component) with a no-op render: function() {}? Otherwise, I think React will replace your wrapper's innerHTML.
On the other hand - are you rendering server-side? If so, the output of a "dumb" component handler for '/' which prints the same markup as your container currently holds, would quite literally be static HTML anyway, despite being rendered by React.