I'm trying to use Highcharts with my web application, which is written in React. Highcharts is rendered via a div tag.
I'm rendering everything on my page (i.e. the panels, input fields, buttons, tables, dropdowns, etc) from my JSX file.
When I try to stick a div tag into my JSX with an id or class to link it to the Highcharts JavaScript, I get an error message in my console (Highcharts error #13) that the rendering div is not found.
render() {
return ( <div>
<div id="container"></div>
</div>
);
}
}
However, when I stick a div tag into my HTML with an id or class linking it to my Highcharts JavaScript, I can get the chart to show up on the page, but I want it inside my JSX so I can place it inside the panels, containers, etc I have in my JSX.
To answer my own question here, the problem was that the render function is called after highcharts attempts to look for the div. You can either put the chart rendering code in the componentDidMount() section, put a timer on it, or render the highcharts code directly using dangerouslySetInnerHTML.
Related
Overview
In the Blazor WebAssembly App, I would like to embed a Razor component in a div element newly added on the JavaScript side. Please let me know if there is a better way.
What I want to do
Prepare components such as Sample.razor in advance
Call JavaScript functions in response to button clicks on the initial page
Add div element by createElement in the called JavaScript function
Embed the Sample.razor component within the div element added above
What I tried
Use innerHTML for the div element added in 3. above, and include a call tag for the Razor component.(<Sample></Sample>)
-> Nothing is shown.
Add elements such as iframe/object/embed in innerHTML and include the path to the razor component. (src='/sample')
-> Not Found. (Because this is a WebAssembly app, component pages are not rendered if we request to a server.)
Environment
Visual Studio 2019
.NET 5
Project creation from Visual Studio using Blazor WebAssembly template
If you have prepared the Simple.Razor component in advance, one way you can achieve this is assign this component under if condition as follows,
#If(visible==true){<div><simple></simple></div>}
and on press of a button change visible variable in a function followed by,
StateHasChanged()
and it will do what you want this way you dont have to do JSInjection.
I am getting the classic error:
Error caught during routing: Error: Target container is not a DOM
element.
on this line of code:
ReactDOM.render(<GamerTag game={this.model} />, document.getElementById("gameDescription"));
I am rendering that React dom inside a Backbone view.
gameDescription is the ID of a div in my view's template where the React component is being rendered.
Like everyone says, put your main js file at the bottom of your main index file.
And I did, I put <script src="~/dist/app.js"></script> right before the ending </body> tag.
But I still get the error.
I know the div exists, because when I view the source in the browser, I see it.
Also, if I use document.body.appendChild(document.createElement("div")) inside the ReactDOM.render,
it works fine...well except for the fact that it's at the bottom of my page where I don't want it to be.
So I am horrid besides myself, what other options or things can I try? I am out of clues.
Thanks you!
Your element doesn't exist when react is trying to render your component.
I'm guessing this is because your backbone view isn't rendered at the time that react is trying to render the component.
An easy way to check this is to put a debugger; statement in your code just before your ReactDOM.render() call, and while stopped, open your DevTools, and look at the DOM and search for you element.
Or just open the console and run document.getElementById('gameDescription') and see if it's actually there.
I have an existing templated website that i want to continue with react. I decided to use create-react-app for that, but i do not know how to move the html based template to the react application. What i am trying to do now is to find a way to create a functional component out of the html file and then pass it to the index.js file for rendering. What i don't know is if this will work. Any ideas on the best way to do this?
There have tiny changes with HTML and JSX. JSX use className instead of class and htmlFor instead of for as mentioned up there.
If you are using VS code editor, here are your steps to make things a bit easier:-
In Vs code, Download an extension name HTML to JSX.
open your raw HTML code with VS code.
Select all code you want to convert.
Right-click and see at the bottom of the list, you will see an option Convert HTML to JSX. Click it and you are done.
step:1
step:2
result
Yes it is, and JSX was designed to be very similar to HTML to allow just that sort of thing.
However, JSX does have a few differences from HTML, which you'll want to read about. For instance, certain HTML attributes "overlap" with JS keywords, so in JSX you should use (for instance) htmlFor instead of for, and className instead of class. Also every tag has to be closed (as in XHTML).
Once you get your initial HTML into your Javascript file, you'll then want to start breaking up the parts of that page into separate React components, so that you can focus on them (and their logic) in independent chunks.
I am using ace editor with ng2-ace-editor in angular 7. I am trying to make an editor for some specific syntax. I want to recognize certain pattern before add content dynamically inside the Editor and replace with some kind of HTML. I want to display that HTML as rendered part, not as code. Currently when I add the content inside the ace is rendered as code.
I want to show as:
I am using #ViewChild to get the editor on my component
export class ViewAceEditorComponent {
#ViewChild('editor') aceComponent: AceEditorComponent;
Then, I use setTxt() method to assign the code to the editor dynamically.
this.aceComponent.setText(this.myTextWithHtmlCode);
Any ideas on how to render the HTML instead of the code?
I am trying to make my first Sapper site and I'm populating the content similarly to how it's done in the template here.
My problem is that I want to allow usage of custom components in the content of {#html post.html}. Currently it doesn't work, the HTML is just inserted there without being treated like a component, even if I import the component in [slug].html and it works if used directly somewhere besides that {#html post.html}.
The behaviour is kind of expected as the content is fetched after svelte has finished it's work, but I am not sure what should I do then. I want a couple of custom components like <FancyButton> to be usable in the user generated content.
Can I ask the [slug].html component to look at the post.html or just whole content after insertion and create an instance of child component wherever it should be? Or should I somehow compile the string beforehand on the server?