I am confused about the below part of the code. For me, the first code is not working as expected when conditionally rendering the href attribute.
But If I conditionally render the whole anchor tag it is working.
Issue I am facing in the first code:
When url variable is present it is redirected to the url.
But when url variable is not there, it is not redirected to google
link
First:
<>
<div>
<a href={url? url : "https://google.com"}>Read More</a>
</div>
</>
Second:
<>
<div>
{ url ? Read More}
</div>
</>
Can anyone please tell me what the actual problem is in the first code?
Related
I have this code in React:
{web ? <p>{web}</p> : ''}
In my a tag I have an href pulling an URL from the database. However when I click the link in the application it goes to a local path because I'm missing the https part of the address. I've tried various option using a concatenating + but that still doesn't work
Any help would be appreciated.
This should work.
{web && (
<p>
<a href={`https://${web}`} rel="noreferrer">
{`https://${web}`}
</a>
</p>
)}
In order to force react-router to treat links we should insert link as component: <Link to="/path"> rather then <a href="/path">.
What should I do in situation when html content arrives from server and inserted via (oh no...)
dangerouslySetInnerHTML?
render() {
return (
<div
dangerouslySetInnerHTML={{__html: store.posts[0].post_content}}
/>
);
}
What is the best way to force react-router to treat (internal) links in this html? Should I parse the html and convert it to components?
Instead of normal links
you could use a link that run a function like this:
<a OnClick={()=> history.push('route')}>go to</a>
sorry I haven't tested it :D
I would like to have a div with class "dialog" so when user click on that div anywhere expert links inside it redirects him to one page. And "links" inside that div should redirect user to another page. And return on previous page browser button should return him on correct page. I saw some examples on javascript but they doesn't work for angular and I always get second page when return back.
I have following snippet of code.
<div ng-repeat="dialog in dialogs">
<div class="dialog row well well-sm">
<div class="col-xs-8">
...
<a class="msg-heading" href="#!/item/{{ dialog.adv_id }}">
{{ dialog.adv_name }}
</a>
....
</div>
</div>
</div>
Here is one way you could do it by passing the event object as argument of ng-click function and checking event.target
<div class="dialog row well well-sm" ng-click="doRedirect($event)">
Then in controller or directive:
$scope.doRedirect = function(event){
if(!angular.element(event.target).hasClass('msg-heading') ){
/* not the <a> tag so put your redirect code here */
}
}
Regarding the use of ng-src in order to display an image, this code works during runtime - but not on the initial page load:
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
on my initial page load I get the error:
GET http://localhost:33218/Images/ 403 (Forbidden)
Yet during runtime, when I drag and drop an image onto my dashboard, the front end doesn't complain anymore.
I do realize that the dashboard framework I'm using is dynamically adding a div onto my page, and then rendering the image; however, why does it NOT complain at this time ?
In other words, I'm trying to avoid using the full path like this:
<img ng-src="http://localhost:33218/Images/{{widget.initImage}}" />
**** UPDATE ****
This bit of code works, and I did not need to specify ".../../" relative path.
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-hide="widget.gadgetConfigured">
<img ng-src="Images/{{widget.initImage}}" />
<div class="caption">Click to configure</div>
</div>
In addition, my {{widget.initImage}} was coming back empty upon reload - an application bug !
Change you code to following.
You need to check widget.initImage is initialized or not. Before passing it to ng-src .
Use ng-if on widget.initImage
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage">
<img ng-src="../../Images/{{widget.initImage}}" ng-if="widget.initImage" />
<div class="caption">Click to configure</div>
</div>
I'd suggest you to use ng-init directive like this...
<div class="imageHolder" ng-click="openWidgetSettings(widget);" ng-show="widget.showInitImage" ng-init="getImgUrl()">
<img ng-src="{{myImgUrl}}" />
<div class="caption">Click to configure</div>
</div>
In your controller,
$scope.getImgUrl=function()
{
$scope.myImgUrl= //get your img url whatever it is...
// You can also set widget.showInitImage variable here as well...
}
So I'm trying to build a full page in Reactjs but some components are persisted throughout pages. The structure is something like this:
<div>
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
<section className="right>
<section className="persist-this"/>
{moreStuff}
</section>
</div>
</div>
During rerendering is the structure change is significant enough (changing from a page with header & nav to no header/no nav the persist-this section will be re-rendered as well.
Right now I'm actually doing React.renderComponent for each individual pieces & keep the structure static (so like renderComponent for header, nav, left section & moreStuff separately) & I wonder if there's a better way to doing this?
EDIT: I think I do know why this got re-rendered. I guess my question now becomes more like how to organize my structure better. So I got BasePage.jsx which has the structure above & in other pages (like HomePage.jsx or OtherPage.jsx) I do:
var HomePage = React.createClass({
render: function () {
<BasePage>
<p>Home</p>
</BasePage>
}
});
I think when I do React.renderComponent it see <HomePage> & <OtherPage> as 2 completely different Components although they are wrapped by the same <BasePage>, thus unmounting the Page. Should I separate the differences of those pages into mixins?, then always renderComponent(<BasePage>, el) to prevent unmounting?
If something persists between pages, the correct way to do it would be to separate your structure so that whatever persists only shares an ancestor which also persists.
In other words, you should structure it like this:
<div id="siteRoot">
<div className="dynamic">
{showHeader ? header : ''}
{showNav ? nav : ''}
<div className="main">
<section className="left">
{this.props.children}
</section>
</div>
</div>
<div className="persist-this">
<section className="right>
<section/>
{moreStuff}
</section>
</div>
</div>
Then your css should adapt to your new dom hierarchy and update your layout accordingly.
Now when you switch content in your dynamic section, React will automatically know that it doesn't need to re-render anything in the persist section - since nothing was changed there.