https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html
As per this documentation, we do not need to have a data- as a prefix for a custom HTML attribute in JSX to appear in the actual DOM element without warning.
But when I try and use<div size="hello">my div element</div> it appears as <div>my div element</div> in actual DOM.
When I try <div Size="hello">my div element</div> then it appears correctly but it gives a warning.
What is the right way of adding size as a custom property on the HTML attribute?
example codepen here
Since the "size" attribute is a valid attribute for other tags but does not exist on the <div> element React strips it. In the documentation you referenced, it does state that you can prefix attributes with data-. "Just like before, React lets you pass data- and aria- attributes freely".
For obvious reasons, this is not recommended and should probably only be done if non-react scripts utilize the attribute.
To answer the question, if you have to store data in attributes, the best option is to prefix it with data-.
Related
I know that we can use css classes for the className attribute but I see in a lot of tutorials that even if the value written for className is not used in the css file it is still used in the components. Can someone explain why? Or how to determine the value of the className we need to use?
The HTML class attribute (as set by the React className attribute) is a general way to label elements with some meaningful labels. It can be used for CSS styling, or JavaScript queries like document.querySelectorAll, or just to make the HTML intent more readable.
In particular, it's common to include classes in your HTML in case you'll need them later for CSS styling or JavaScript queries. To be clear, there's no list of valid class names; you can use whatever names you want, and use or not use them in order code as you wish.
I'm reading the react JS documentation and came across this:
Specifying Attributes with JSX:
You may use quotes to specify string literals as attributes:
const element = <div tabIndex="0"></div>;
I'm fairly comfortable with javascript but I'm not quite sure what the documentation means by "attributes". I know about object properties but this looks like a simple variable.
What exactly is a react js attribute if it is different from a property?
html elements have both attributes and properties
there are a few different scenarios for how they relate to each other. There doesn't necessarily have to be both an attribute or property for each value set on an element.
1. attributes
attributes can be set in html
<a id="mylink" href=""/>
where href is an attribute
or attributes can be set by using the set attribute method of an element
document.getElementById("mylink").setAttribute("href", "")
and read using
document.getElementById("mylink").getAttribute("href")
2. properties
properties can be set and read by retrieving the element as well
document.getElementById("mylink").href = ""
where href is a property
when they are set the first way, you are setting the attribute, the second sets the property.
Usually the underlying element attribute and property are
automatically synchronized, sometimes they are not.
Sometimes there is no matching attribute or property,
only one or the other exists.
Attributes and properties are part of native html elements, which React provides additional support and abstractions around.
Custom React components (such as <MyComponent prop=""/> or <MyComponent prop={someVar}/>), which you create yourself, accept props using the same syntax. The word props in this context refers purely to React props. React custom component props are just plain javascript values passed into your component. These custom components don't get added to the page. They are used to organize and render actual html elements.
When mounting a native component inside of a custom component (such as <div id=""/> or <div id={someVar}/>), the React library sets the underlying html attribute on the native browser element.
So there are two things to keep in mind here
html element attributes verse html element properties.
custom element props are neither of those, but setting a prop on a JSX
native element such as a div, set's the generated element's
attribute.
Now that's been established, the documentation above is saying: if you want to set an attribute value to a string you can use that specific syntax. That syntax only works for setting attribute values to strings.
You can use either:
<div id="myid"/>
or
<div id={'myid'} />
to set a string attribute value. They're probably just pointing out the syntax differences.
if you do:
<div tabIndex="0"/>
the value of tabIndex is the string 0 not the number zero
verses this:
<div tabIndex={0} />
which will pass the number zero to the tabindex attribute of the underlying html element
To me if we pass any parameter in function component then what we diclare in html is properties.But if you use (className/style/etc...) directecly in html then it will be attributes.
AngularJS 1.6 documentation for directives states:
$compile can match directives based on element names (E), attributes (A), class names (C), and comments (M).
(...)
The following demonstrates the various ways a directive (myDir in this case) that matches all 4 types can be referenced from within a template.
<my-dir></my-dir>
<span my-dir="exp"></span>
<!-- directive: my-dir exp -->
<span class="my-dir: exp;"></span>
Can you use components in the same way, adding them to HTML element by attribute? Because documentation for components always shows examples of comonents being used as elements.
To clarify, instead of having to write it like below and cluttering my markup with non-standard elements:
<component-name></component-name>
I'd like to be able to do something like that in my HTML:
<h1 component-name=""></h1>
The entire web is moving towards components. I wouldn't be concerned about "non-standard elements." At any rate, components are restricted to elements only. They cannot be used for Attributes. This is the primary use case for directives vs. components.
Components are provided specifically for creating HTML and augmenting it with view based behavior. Directives are now primarily for decorating HTML.
I am trying to go through Meteor's tutorial at https://www.meteor.com/tutorials/angular/templates
There's a part that I can't figure out
in their client/main.js:
<body>
<div class="container" ng-app="simple-todos">
<todos-list></todos-list>
</div>
</body>
They just put a <todos-list> tag in the middle and that template is loaded. I can't figure out how the todos-list gets translated to the actual template, is there some name transformation convention that "todos-list" gets translated to "todosList" and referenced that way?
Thanks in advance
This is due to the Normalisation performed by AngularJS.
Normalization
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).
The normalization process is as follows:
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
Link to AngularJS Docs here
todosList is a component. Since html doesn't support capitalization, you write todos-list in the tag. A component can come with a template (html mark-up) associated with it. So, when you put <todos-list></todos-list> in your html, angular will insert the html there. Look at the angular documentation for components and directives. There are tons examples on the web.
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.