I'm not really sure what is happening when the component tries to find the div, but here is my render and my div.
HTML:
<div id="app"></div>
Render function:
Meteor.startup(() => { ReactDOM.render(<App />, document.getElementById('app')); });
I get this error in the console: Error: Target container is not a DOM element.
I also put a console.log after my render function trying to find the div id but returned = null.
What packages have you got installed?
if you've still got blaze-html-templates or templating, remove them both and replace with static-html
Otherwise Meteor will render the html as a blaze template some time after startup. (Also if you're using React, you probably don't want to ship Blaze to the client as well!)
See http://archive.is/g20il#selection-399.104-399.186
Hard to see without your full html but your script tag to the .js script should be after the div id "app" tag.
Related
So I have two components (Preview component and an app component) in an angular project. I displayed one of the components (preview Component) inside the other(app component) through a relative path in an iframe:
app.component.html
<iframe
src="/pagepreview"
width="478"
height="926"
id="iframeId"
#previewFrame
>Alternative text
</iframe>
Now, In the app.component.ts file, I want to access the elements of the preview template, so I did this:
#ViewChild(`previewFrame`,{ static: true }) previewFrame: ElementRef;
onLoad() {
let frameEl: HTMLIFrameElement = this.previewFrame.nativeElement;
let showTemplate = frameEl.innerHTML
console.log(showTemplate )
}
The result I got was the Alternative text word inside the iframe tag.
Does anyone have an idea how I can get to access the HTML tags in the preview component page? I need to do this so I can do some DOM manipulation of the page preview component on the app component page. Thanks.
Apparently the page renders faster than the function that calls the DOM object, despite calling it inside an ngAfterViewInit life cycle hook. I added a setTimeout() function and now I'm able to get the DOM elements I want.
This answer provided the context to my solution.
I am working on a web app. which has magnolia as CMS. i am still new here but i will explain the scenario.
magnolia is providing the index.html which has reference of the components.But for some of those components it also provides some additional html content. this additional content has to be shown inside the particular component's template. refer following for better understanding.(remember this is inside the index.html)
<my-component>
<div> this division has to be shown inside the my component template.</div>
</my-component>
I have tried following approaches till now.
trying to use - this apparently does not work as i have learnt recently that the angular is not the master of root template(index.html). so ng-content never works. correct me if i am wrong.
using shadow dom view encapsulation. I am not expert in this, but setting viewencapsulation = shadowdom and defining slot inside the component template fulfills my purpose. The only issue with this approach is the scope of this shadow element. it will be inside the shadow root which has its own scope so no global styles are applied inside it. i had to import all the global css for each such component, which makes the main.js go crazy in size.
can someone please suggest me if there is any better or other solution to this problem?
Have you tried using Input() values for that component?
index.html
<my-comp [myInputs]="'My Input HTML <b>Content</b>'">
your receiving component…
<div [innerHTML]="myInputs"></div>
On my side, I use <ng-content></ng-content> inside the component where I want to put my dynamic content.
Ex:
<app-help-tool>
<span i18n="##pictoTable_helpPictoList">Click on a picto to see its description.</span>
</app-help-tool>
And in HelpToolComponent.ts:
<div
class="help_content"
*ngIf="this.isVisible && this.helpService.isHelpOn()"
[#showHideHelp]
(click)="showHideHelp()"
>
<ng-content></ng-content>
</div>
The result is to put the span content into the div of the component.
I'm making a website where first I use the JSX and React to creat the content and later wanna use the jQuery to create a slideshow, but I don know why the slideshow doesnt work.
function Peli (prop){JSX code}
$(document).ready(function)(){slideshow})
let element = <Peli />
ReactDOM.render((element), document.getElementById('root'))
If the code for the slideshow is put in the html file works
In either of the cases the console doesn't show an error
I found the problem.
React elements are immutable. Once you create an element, you can’t
change its children or attributes.
I'm very new to React.js but exploring it I expected something that I'm not able to do.
Say that I have a component:
var SampleComponent = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
Is this the only way to add it to the DOM?
React.render(
<SampleComponent />,
document.getElementById('content')
);
I hoped I would be able to do something like this directly in HTML after having defined the component:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<SampleComponent />
</body>
</html>
Am I missing something? Thanks
No, using React.render() is the "only way" to do it.
You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).
There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.
In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.
I'm very new to React.js but exploring it I expected something that I'm not able to do.
Say that I have a component:
var SampleComponent = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
Is this the only way to add it to the DOM?
React.render(
<SampleComponent />,
document.getElementById('content')
);
I hoped I would be able to do something like this directly in HTML after having defined the component:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<SampleComponent />
</body>
</html>
Am I missing something? Thanks
No, using React.render() is the "only way" to do it.
You might be expecting something along the likes of Webcomponents where you can define you custom elements and put those in your HTML but that's not the way React works (yet perhaps).
There is however a library called x-react where you can register those types of elements, but still it's JavaScript powered and not straight up HTML.
In a typical app you would have a high-level controller-view component mounted to the DOM this way, but that component would contain a hierarchy of child components in its render method to build up the structure of your interface. This is the idea of composable views which is an advantage of react. These child components can be used directly within the jsx of the parents' render methods in the same way you had hoped, so you really only have to call React.render once on the top-level component.