How to "dangerously" set plain text of JSX in React.js? - javascript

As we know from the documentation of React, we can dangerously set custom HTML in the JSX component like this:
<div dangerouslySetInnerHTML={{__html: '<b>Hello</b>, <i>World</i>'}} />
The question is that are we able to set plain text JSX in other JSX component like this:
import { Button } from 'react-bootstrap'
...
<div dangerouslySetJSX={{__jsx: '<Button>Hello</Button>'}} />
or some else way.

Related

HTML tag vs React Component Performance in React

What if I Convert all html tag in react component
such as html button: <button type="button">Test </button>
convert to react pure component
export default function Button({type, text, onClick}) {
return <button type={type} onClick={onClick}>{text}</button>
}
and use it 1000 time. Is there any advantage in app performance ?
If you have any behavior in the button or html tag then you should create a separate component. Unless there is no need to create component and it would not effect in performance.

When mixing Blaze with React, is there a way to pass in code from the html file as a react child?

I have an app that uses both Blaze and React, and we are slowly refactoring out the Blaze, but for the foreseeable future we will still have both.
I currently have a simple blaze template which has been changed into a React component. The template looks something like this:
<template name="myTemplate">
<div>
<h1>{{someTitle}}</h1>
<div>
{{> Template.contentBlock}}
</div>
</div>
</template>
The equivalent component currently looks like this:
export default class MyComponent extends React.Component {
static propTypes = {
someTitle: PropTypes.string.isRequired
}
render () {
return (
<div>
<h1>{this.props.someTitle}</h1>
<div>
{this.props.children}
</div>
</div>
)
}
}
The usage of the Template within another html file looks something like this:
<div>
Some Stuff
<div>
{{#myTemplate someTitle="Some Title"}}
<div>
More stuff within to go within my template
</div>
{{/myTemplate}}
</div>
</div>
What I am currently trying to do is get rid of myTemplate and replace it with MyComponent. Usually this could easily be done by simply putting in {{> React component=MyComponent someTitle="Some Title"}}, but for this case since I have content within the template that probably has to be passed in as the component's children, I am not sure how it should be done.
So the question becomes, how can I pass in that content that is to be rendered within the template to the React component? Is there any way around this?

How to apply CSS style to custom React component

I created a demo react app with 'npx create-react-app my-app'. When I try to apply style to React component nothing happens, but when I apply it to a normal HTML tag like <div or <p> it works. I do not why.
I also tried adding :local in the css file like: :local(.taken-frame)
// index.js =================
import './style.css';
ReactDOM.render(
<TakenFrame className="taken-frame"/>,
document.getElementById('root')
);
// style.css ===============
.taken-frame{
color: blue;
}
Css styles are applied to JSX elements in react but not to the component
Wrong way of applying css styles but className is still a valid prop to the component. You can access this using this.props.className and pass to the div as className like I mentioned in right way example
<TakenFrame className="taken-frame" />
Right way of applying css styles
class TakenFrame extends React.Component {
render(){
return(
<div className="taken-frame">
</div>
//OR
<div className={this.props.className}>
</div>
)
}
}
I use the following style:
import styles from 'yourstyles.css'
...
class TakenFrame extends React.Component {
render(){
return(
<div className={styles.classNameDeclaredInCssFile}>
</div>
)
}
}
yourstyles.css file should look something like:
.classNameDeclaredInCssFile{
//... your styles here
}
In your case you are simply passing a property called "className" to your component but not using it. In your component if you did something like:
class TakenFrame extends React.Component {
render(){
return(
<div className={this.props.className}>
</div>
)
}
}
It would work I expect but I prefer to keep my styles assigned to each component, I find it adds confusion for me as a developer when I am passing styles around the component hierarchy a lot. I hope this helps.
You could use styled components as-well. Please refer https://glamorous.rocks/basics

Using Custom HTML Properties in Meteor with React

Using React with Meteor, how can I render a HTML tag with custom properties?
For example,
<div class="page-header-image" data-parallax="true" filter-color="orange" style="background-image: url('./assets/img/header.jpg');">
has custom property filter-color="orange" which we want to render using the render function of a Reat.Component:
import React from 'react';
export default class Home extends React.Component {
render() {
return (
<div className="page-header-image" filter-color="orange" style={ {backgroundImage: "url('./assets/img/header.jpg')"} }></div>
);
}
}
Also, is there a neat way to include these properties especially when you have many tags with custom HTML properties?

React | Multiple render

I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...
i tried this i didnt work
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render () {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
then when i load the page only prints the <h1>Test</h1>... why?
I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/
I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:
<div id="test"></div>
<div id="app"></div>
I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?
Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
(Make sure you're using the "dev" version of React to see these)
You can create a new component and call from that.
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
and then call
render(<Program />), document.getElementById('...'));
We created a framework to do this with great success.
Have a look at React Habitat.
With it you can just register components eg:
container.register('SomeReactComponent', SomeReactComponent);
Then they auto resolve in the dom via:
<div data-component="SomeReactComponent"></div>

Categories