I need to apply multiple classes to a React component without installing anything extra. Is that possible?
<Component id="test1" className="blue-text kps hide-on-small-and-down" />
I also tried
<Component id="test1" className={`blue-text kps hide-on-small-and-down`} />
But nothing works.
I have been searching for hours but did not find anything that does not require extra installations.
Please do not downvote without explaining why.
Thank you
When you add a className directly to a component, it is passed to that instance of the component as a prop accessible inside the component as this.props.className, and it's up to you to apply that class to actual DOM elements inside your component.
Remember that a React component is not an actual DOM element, but a higher-order logical construct that will be translated into one or several DOM elements (while also adding behavior, etc.). CSS classes only apply to DOM elements.
I see a wrong usage of className in your code. className stands for standard class attribute in standard html. Quoting the documentation.
"To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like , , and others."
It is for regular DOM and SVG elements where you can use className attribute.
Example Fiddle
<div className="one two three">
This is the {this.props.name}
</div>
Example usage.
Adding another point I don't think using className to pass props down to child elements is a good idea since the className is serving a purpose here.
Related
I have React component that renders some HTML with <div> tag. I want to use that component in <p>, but that occurs error <div> cannot appear as a descendant of <p>.
Can I find that div and replace it with <span> tag?
What I need to find:
<div hidden></div>
You can't really replace an element type like that. Assuming you don't have direct access to this component, you could do some convoluted thing where you wrap the component in a div with a given ref, use that ref to select your element, save it's children, remove it, create a new element, etc, etc.
But you'll probably be much better off just not using a <p> tag in this instance, or figuring out if you have any ability to modify those elements through whatever package youre using.
The goal is to create a W3C web component in React which supports arbitrary DOM nodes as children.
The initial markup in the browser should be like this:
<custom-button>
some <u>styled</u> text here
</custom-button>
I would then:
call customElements.define() to register my React code as the implementation of the custom-button,
inside the implementation create a shadow root inside <custom-button>,
afterwards call ReactDOM.render(<CustomButton ...>, shadowRoot); to populate this shadow root
The DOM structure in the browser is now:
<custom-button>
#shadow-root
<div class="CustomButton">
<!-- x -->
</div>
some <u>styled</u> text here
</custom-button>
But this is not really the desired results; I need the original content of <custom-button> to render inside <div class="CustomButton"> now.
I am aware of the React children prop, but as I understand it, it will only work for children that were also declared inside the React implementation and not with arbitrary DOM nodes that were created on the surrounding web component element.
On the other hand I read that Angular implements a concept they call "transclusion" in which they provide slots which DOM children web component will be mapped into. Is there anything similar in React?
One quick "workaround" that I could think of in React is to:
obtain the ref of the top-level JSX tag,
find the shadow root in ref.parentNode
iterate through all children and re-attach them to ref as new parent
This would only cover the initialization though. If, at runtime, some other script tried to append more children to <custom-button>, or re-order or delete previously inserted children, this would probably fail.
I have just realized that the <slot /> of the web components standard solves the problem.
So, to reflect the content of the <custom-element> inside the React component, the following is completely sufficient:
render() {
return (
<div className="customElement">
...
<slot />
...
</div>
);
}
I have a React App that results to the structure similar to this:
[EDIT.: this is not a source code (which is not simply in one component), but rendered html (I believe it's sufficient for describing the problem)]:
<Component1 className="main-component1">
<Something className="sub-component1"/>
<SomethingDifferent className="sub-component2"/>
<Something className="sub-component1"/>
</Component1>
<Component1 className="main-component1">
<SomethingDifferent className="sub-component2"/>
<SomethingDifferent className="sub-component2"/>
<div className="popup"/>
</SomethingDifferent>
<Something className="subComponent1"/>
</Component1>
.
.
.
the popup is rendered only in specific situations. And I would like to change the className of its top parent (Component1) to be className="main-component1 containsPopup". Any idea how to do that?
I was thinking about using Refs, but I wasn't able to find a suitable use in this case.
Another idea was just to use some query filter to find it, but that doesn't seem to me like a nice approach.
I will be glad for any ideas ^_^
When trying to hide an input tag in regular html you can use the following:
<input hidden />
and when you want to show the tag we use:
<input />
Apparently in the return portion of a react component you can do the following to hide an element:
<input hidden={true} />
I can't find any documentation for this. Could someone direct me to a source?
Any standard or custom DOM attributes are fully supported according to the docs, just camel case them and react will put the corresponding attribute in the actual dom.
https://reactjs.org/docs/dom-elements.html
you may also find it helpful to read the intro to JSX since there may be confusion there.
https://reactjs.org/docs/introducing-jsx.html
Lastly just being nit picky <inpupt /> is a react element not a react component.
Difference between React Component and React Element
React has something like this.props.children: https://facebook.github.io/react/tips/children-props-type.html
Does Vue.js have also some similar to access the child-elements?
The equivalent to this.props.children in Vue is <slot />.
Example
<template>
<div>
<slot />
</div>
</template>
See http://vuejs.org/guide/components.html#Content-Distribution-with-Slots
In your requirement：
Using slot is a right way to pass a custom component into the child component, when you are in the parent component level.
But why doesn't it work? Because in Vue 1.0, it uses the browser to parse the template, not virtual DOM. Browser-parsing has a problem: some HTML elements have restrictions on what elements can appear inside them.
see Vue1.0 Doc: vue1.0 - components - template parsing
And you happen to make that mistake.
This is a limitation in Vue1.0, you have to write some Directives to do them.
But in Vue 2.0, things have changed, the template-parsing became a virtual-dom implement. You can pass any DOM elements into slot.
I try your link in last comment with Vue 2.0, it works.
Just change the External Resources to https://unpkg.com/vue#2.0.1/dist/vue.js
Vue.js has this.$children, which also gives you an array of child components
http://vuejs.org/api/#vm-children
If you want to reference specific components, you might want to use v-ref and this.$refs