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
Related
My case: I have a page preloader, but it makes using react and it's to long (first paint). SSR could solve this problem, but it's too difficult (I mean solving this problem by full SSR).
I want to use something like React.hydrate but for one single component.
I have <MyCustomPreloader /> component which renders <div class="loader" />, but it render with a long delay (after loading the page).
My idea: For example, inside index.html I can make <div class="loader" /> which will be visible at first paint. Main problem say <MyCustomPreloader /> that I have already rendered div and he must use it without creating new.
I could find the necessary DOM inside the component and work with it, but this means abandoning React and continue to work directly with the DOM component.
I tried to manually add <div class="loader" /> into <div id="root"></div> and use React.hydrate instead of React.render and it works! But React.hydrate tries to hydrate every components before and after loader and this solution is kludge.
I believe that there is a function that can partially hydrate a single component (say to component "use this DOM" instead of making same new element), but I cannot find it.
For example:
const loader = ReactDOM.someMagicFunction(<MyCustomPreloader />, document.getElementById("loader"))
Example of this kludge: https://codesandbox.io/s/hopeful-meadow-qgz6j Description: I have "pre-rendered" loader in index.html, and react after loooong loading gets it and USED it (this DOM element).
Can I hydrate single component with some DOM element?
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 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.
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
I'm trying to render multiple components on 'standard' DOM. The first
set(below) renders, but the second, identical set, does not. Any
idea why? btw, the 'Card' component is the same as 'JunkComponent'.
Could this be a "unique id" thing?
thanks in advance
this link should best explain:
http://pastebin.com/8f7HVyyj
You shouldn't create elements with same ids.
As you have two elements with id JunkTestComponent on your page. React renders <JunkComponent /> only in the first one.
Also if you want to render component in the #Card too you should call:
ReactDOM.render(<JunkComponent />, document.getElementById('Card'));