I need to modify the styles of the child component from the parent component. But the styles defined in the parent class are not getting reflected in the child component ? What can be the possible approach?
Component2 ( Child Component )
<div className={ classNames(css.class2, this.props.classWrapper) }>
<div className={css.childclass2}></div>
</div>
Component1 (Parent Component)
<Component2 classWrapper={css.class1} />
.class1{
.childclass2{
// the styles defined here are not reflected in the Component2
}
}
Related
I have a Component, DataGrid, which represents a table with expandable rows. Each row, when expanded, shows a child DataGrid table, which is very similar to the parent DataGrid component.
Therefore I defined a base class DataGridComponent, from which the child inherits the both the component and the template. however, I need to change one of the tags in the child's template. Do I have to rewrite the entire template, or could I just point the templateUrl to the parent's template and programmatically change the one html tag that I need to change?
Minimal Example:
base.component.ts
#Component({
selector: 'datagrid',
templateUrl: 'datagrid.component.html'
})
export class DataGridComponent {
childEnabled:boolean = true;
// stuff
}
datagrid.component.html
<div>...</div>
<div *ngIf="childEnabled">
<childgrid
[options]="childOptions"
>
</childgrid>
</div>
child.component.ts
#Component({
selector: 'childgrid',
templateUrl: 'datagrid.component.html' // <-- POINT TO BASECLASS TEMPLATE
})
export class ChildGridComponent extends DataGridComponent{
}
childgrid.component.html // <-- HOW THE (REAL) TEMPLATE SHOULD BE
<div>...</div>
<div *ngIf="childEnabled">
<grandchildgrid
[options]="childOptions"
>
</grandchildgrid>
</div>
grandchild.component.ts
#Component({
selector: 'grandchildgrid',
templateUrl: 'datagrid.component.html' // <-- POINT TO BASECLASS TEMPLATE
})
export class GrandChildGridComponent extends DataGridComponent{
constructor() {
super();
childEnable=false;
}
}
grandchildgrid.component.html // <-- HOW THE (REAL) TEMPLATE SHOULD BE
<div>...</div>
<div *ngIf="childEnabled">
<grandchildgrid
[options]="childOptions"
>
</grandchildgrid>
</div>
and so on until childEnabled is set to false. Is there any chance to do something like this and is it something that would make sense from an angularly point of view? Would ng-content be of any help in this case?
The content of DataGrid can go into a separate component and that can be used as a template in both parent and child DataGrid.
Alternative option is to have the same tags and control behavior using different class and id for parent and child
I'm trying to add a custom HTML attribute on a React component:
const Parent = () => (
<div className="parent">
<Child data-custom="foo" />
</div>
);
Where Child is another React component, but the attribute gets stripped on the output HTML. I'm aware that I could simply add the attribute on the Child root element, like so:
const Child = () => <div className="child" data-custom="foo" />
Or read the attribute in the Child component via props, but that's not what i'm looking since that would couple the attribute with the component, and I'm looking for a more contextual approach (the attribute would be used for test automation purposes).
Is there a clean way to do that in React?
I'm also considering writing a Babel plugin to add the attribute or prevent the stripping, but that would be another question.
Thanks!
React element doesn't necessarily correspond to DOM element that could have HTML attributes. React component can be rendered to multiple DOM elements or no elements at all.
If Child should be able to provide additional props or attributes to child DOM element, it should pass them explicitly:
const Child = props => <div className="child" {...props} />
This way data-custom="foo" will be passed to <div>.
For this, you can try this in your react script.
const MyCompo = () => {
return (
<div>
<p>HTML Code</p>
</div>
);
}
export default About;
Otherwise you can create class and then define your components and then export them.
import React from 'react';
import '../assets/css/style.css';
import '../assets/css/pure-min.css';
import '../assets/css/custom.css';
import 'font-awesome/css/font-awesome.min.css';
import $ from 'jquery';
class FirstScreen extends React.Component {
constructor(props) {
super(props);
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
}
render() {
return <div>HTML Code</div>;
}
}
export default FirstScreen;
You could use the below syntax
const Parent = () => (
<div className="parent">
<Child data-custom="foo"/>
</div>
);
const Child = ({...props}) => (<div className="child" {...props} />)
I want to have same appearance for all notification messages. I have a parent component for which two child components render different messages...one normal message and other component displays message based on context.
Below is the code,
class Parent extends React.Component {
constructor(props) {
super(props);
this.element = document.createElement('div');
this.element.className= 'wrapper';
}
componentDidMount() {
root.appendChild(this.element);
}}
class Child1 extends React.Component {
render = () => {
return (
<div onClick={this.close} className="notification_info">
soemthing
</div>);}}
class Child2 extends React.Component {
render = () => {
<div>
<h2>Debug</h2>
</div>}
let content;
if (content) {
return (
<div className="container">
<div className="main">
<div className="notification">
<div className="notification_info">{content}
</div>
</div>
</div>
<div className="close"><SvgClose width="28" /></div>
</div>);}}}
I want to create three divs with className container, main, notification for both child1 and child2 components as well. I want to add the same divs like in child2 to child1 as well before div with classname notification_info.
<div className="container">
<div className="main">
<div className="notification">
What i tried doing is creating three divs with classname container, main, notification for child1 component as well. This would create container for normal and contextual messages as well. But then i am looking for some other way to do it. refactor it or clean way of doing it.
Could someone help me with this. Thanks.
What about making the notification a standalone component? In this way you wouldn't have that much div nesting on a single component.
This is the motive
The background image is not a single file but collection of many thumbnail captured inside a div tag
Code:
import React, { Component } from 'react';
class Background extends Component{
constructor(props){
super(props)
this.state={pictures:[]}
}
componentDidMount(){
fetch('https://randomuser.me/api?results=300')
.then(results=>{
return results.json();
}).then(data=>{
let pictures=data.results.map((pic)=>{
return(
<span key={pic.login.uuid}>
<img src={pic.picture.medium} alt=''/>
</span>
)
})
this.setState({pictures:pictures})
})
}
render(){
return(
<div className="Container1">
{this.state.pictures}
</div>
)
}
}
export default Background;
How should my css should be for Container1 class and for my app class which has the main content?
The following link would be helpful :
https://www.webucator.com/how-to/how-use-multiple-background-images-with-css.cfm
Another solution would be to create a css flex container and dynamically create a element for each image of your pictures array.
Check this link for more info on flex layout.
I have a Route that has a component with this in its render() :
<div>
<Nav/>
{this.props.children}
<Footer/>
</div>
How do I give all components that are rendered through it as children a className?
I've tried this:
<div>
<Nav/>
{React.cloneElement(this.props.children || <div />, { className: 'test' })}
<Footer/>
</div>
but it doesn't work.
I'm assuming the className went on the Route component instead of the component that was passed to the Route component?