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
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.
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?
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 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?
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>