I am trying to implement if , elif, else in jsx template to achieve the following data scoring,and labeling based on the scoring but I am unsure how.
Low – 0.0 – 3.9
Medium – 4.0 – 6.9
High – 7.0 – 10.0
I Have a div with the following code
{feeds.map(post =>
<button className="search-buttons detail-button">{post.cvss}</button>
)
Within JSX directly, we cannot use if/else or loops like (for,while). What we can use however is ternary operator.
Syntax DEMO: {isLoggedIn ? 'currently' : 'not'}
Use this resource from React Official Docs to get you sorted with this.
Conditional Rendering within JSX
You can however use if/else within a function that returns JSX into you code. (That case is also covered in the docs linked)
Related
I used like this in angularjs before. And now I m moving to Vuejs.
How can it be replaced in Vuejs?
angular.element(document.querySelector('.popup-inner#company-etc')).css('display', 'none');
You can use $refs
<div ref="companyEtc" class="popup-inner" ...
...
this.$refs.companyEtc.style.display = "none"
I would advise to use conditional rendering: https://v2.vuejs.org/v2/guide/conditional.html
You also can find more information about getting element in a component in answers to the question: Vue.js getting an element within a component
Just wanted some clarifications. I was told that you are suppose to use ngAttr when there are interpolated markup. For example:
<div ng-attr-name={{Name}}></div>
I also seen some codes online where there are interpolated markups but they do not use ngAttr. Are there certain situations when you use ngAttr and not use ngAttr when dealing with interpolated markups?
I recall running into this issue when working with <svg/> and attempting to interpolate attributes such as cx (which happens to be the classic example in the current angularjs documentation). The browser will complain when you attempt the following:
<svg>
<circle cx="{{cx}}"></circle>
</svg>
due to restrictions when using the SVG DOM API. Therefore, the ng-attr directive comes in handy with
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
As a result, using the `ng-attr- directive in this scenario will appropriately set the value based on your binding. Now, what I have noticed new in the documentation are the following cases that have known to cause issues if you don't use ng-attr
size in elements (see issue 1619)
placeholder in in Internet Explorer 10/11 (see issue 5025)
type in in Internet Explorer 11 (see issue 14117)
value in in Internet Explorer = 11 (see issue 7218)
I'm new on React (I more at ease w/ jQuery or AngularJS). I have a special case and I don't find a good way to resolve it...
My app contains an area which is like a "document viewer". It loads an HTML content from the backend (via API, using Fetch) and inject it in the "viewer" component. The HTML content loaded looks like an "university report" (it's just a formatted text, only <span> and <p> with class="..." attributes, nothing more).
Ex : <p>Lorem ispum <span>some text</span> loreb bis <span>ipsum</span></p> ...
I load the content, and inject it this way in the render() of my component <Viewer> :
<div dangerouslySetInnerHTML={ getFreshlyLoadedHTML() } />
Easy, it works just fine !
But... Now, I want to inject some "interactive" components in the loaded HTML. For example, some button to give a feedback etc. The API must decide where to place the component between the words/nodes of the formatted text (HTML).
Ex :
<p> Lorem ispum <span>some text</span>
loreb bis <span>ipsum</span>
<MyFeedbackButton paragraph="1.3"/>
</p><p>Other Lorem Ipsum<p><span>...</span>
There, I'm stucked because I cannot use dangerouslySetInnerHTML if there are components inside the loaded HTML...
First attempt : I've tried modifying the API, and instead of sending the HTML in a string to the app, I send a custom JSON structure that represents almost the final JSX structure that I want. Then, in my react page, the render function only have to parse the JSON and build the JSX (here, a JsFiddle example if it's not clear : https://jsfiddle.net/damienfa/69z2wepo/34536/ )
It works, but I can't believe it's the good way...
I see a major problem : all the HTML node (span, p...) that I build from the render function are referenced by reactJs, is it really necessary ? Mostly, there are "dead" nodes (I mean, dom node that won't never changed, this is static formatted text).
Just take a look a all those "data-reactid" on nodes that never will be interactive...
What would be your advice on that case ?
What about my attempt with a JSON-structure sent by the API ?
Is there a way to say to react "do not reference that element" ?
Do you clearly see a better solution to my problem ?
Your current workflow is not very secure and subject to many potential errors and open doors, especially concerning code injection ...
The overload due to react tracking the nodes is not an issue, React could track 10 000 nodes and not have a problem (well actually on many of my apps React has more than 100 000 nodes to care about and it still rurns perfectly).
I see different solutions here:
If there are only 3 or 4 possibilities of dynamic components and order, you might have components like "templates" to which you would simple send text arguments. This is the safest and easiest option.
If it doesn't suit your use-case but the JSON file can contain only a limited set of components, the components should be located in your main app, and then rendered with custom props from the JSON. Actually given the structure of data you could consider using xml instead of json and build a xml tree that you would parse and render. Only components from your white list would be rendered and it would limit drastically the potentials security issues. If needs quite some work on the XML parser though.
If the JSON file can contain many many different and unpredictable components or if the behaviour of those components is largely dynamic and independant of your app, you might as well consider using an iframe, with its own JS and HTML, so that this part of the code is isolated from the rest.
Try using an inline anonymous function within the inner content from within React using JSX. It works! Just be careful about how you wire up the data so there isn't a route where a user can inject HTML from an input or text field.
<div className="html-navigation-button">{(() =>
{
const CreateMarkup = ( sNavItemName :string ) => {
return {__html: sNavItemName };
}
var sTextToAddHtmlTo = props.nextNavItem.name.toString();
sTextToAddHtmlTo = sTextToAddHtmlTo.replace( "/", "/<wbr>" );
return (
<div dangerouslySetInnerHTML={CreateMarkup( sTextToAddHtmlTo )} >
</div>
);
})()}
</div>
I didn't override the React internals of 'render()', but only used a React Component with props wiring to pass down data to it for rendering.
I added the hook for 'dangerouslySetInnerHTML' deep within the return content of the React Component so there would be no easy way to intercept and manipulate it.
As such, there is no 100% guarantee on safety, but that's where adding good security to web services, databases, and use of CORS and CORB would be helpful to lock down security risks.
Is is possible to include a newline in an Angular JS expression in an attribute tag? Something like this:
<p ng-repeat="
foo in foos
| filter:{attr: 'something really long'}
| orderBy:bar">
{{foo}}
</p>
EDIT: To clarify, the above doesn't work. I was wondering if there is some other syntax that allows for breaking this kind of expressions into multiple lines.
angular.js parser would be able to handle it, but there's a quick regex check before handing it to the parser (see http://docs.angularjs.org/error/ngRepeat:iexp):
Be aware, the ngRepeat directive parses the expression using a regex
before sending collection and optionally id to the AngularJS parser.
This error comes from the regex parsing.
I filed a bug to loosen this restriction: https://github.com/angular/angular.js/issues/5537, you can hand-patch it in the meantime, it's just 1 character: m (/regex/m).
It is possible for an expressions to span multiple lines. But ng-repeat throws an error if you try to span the expression on multiple lines.
Take a look at this plunker:
Add a new line in the ng-repeat expression and open the browser console to see the error message.
http://plnkr.co/edit/E1O8Iy3VzL3kzj72BDUL?p=preview
Yes, it is possible to use multiline attributes with ANY HTML element, including AngularJS directives.
I like a directive that conditionally puts a tag outside some content (but always prints the content), like this:
<p><strong ng-if-always-keep-inner-content="model.condition">{{model.text}}</strong>/p>
so if condition is true I get
<p><strong>yada yada</strong></p>
otherwise I get
<p>yada yada</p>
I could write it myself, but I want to know if it is possible to do with built in directives/options.
I should perhaps say this is used together with Bootstrap, which afaiu recommends using <strong> vs some class with a bold font.
I don't think there is a built in directive. You should write it.
I suggest to use a classic ng-if
<p ng-if="model.condition"><strong>{{model.text}}</strong></p>
<p ng-if="!model.condition">{{model.text}}</p>
In your specific case, you can also use ng-class and set the strong style via css.