I would simply like to add some styling to the DateBox react component defined as in the code below
Let's say I'd like to change the width of the panel: something like
<DateBox style="width=300"></DateBox>
or
<DateBox>
width=300
</DateBox>
but these attempts did not work.
My actual component is:
import React from "react";
import { DateBox } from 'rc-easyui';
class DatePick extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<DateBox>
</DateBox>
</div>
);
}
}
export default DatePick;
How can I change the DateBox component styling (not the div in which it is contained)?
Thank you for any suggestion!
you can use style attribute like this
<DateBox style={{width:'300px'}}>
</DateBox>
Related
So, I just started with react and i'm having troubles displaying my class component in the browser.
Here's my code...
import React, { component } from 'react'
class Hello extends component {
render() {
return <h1>class component</h1>
}
}
export default Hello
The problem is in component, it should be Component (in PascalCase)
I'm using react portal to present a printable version of my react view. This is what I do:
import { Component } from "react";
import ReactDOM from "react-dom";
export default class PortalWindow extends Component {
container = document.createElement("div");
externalWindow = null;
componentDidMount() {
this.externalWindow = window.open();
this.externalWindow.document.body.appendChild(this.container);
}
componentWillUnmount() {
this.externalWindow.close();
}
render() {
return ReactDOM.createPortal(this.props.children, this.container);
}
}
import React from 'react';
import './order-print.css';
function OrderPrint(props) {
return (
<div className="order-print">
</div>
);
}
export default OrderPrint;
And there's a component called PurchaseOrder where I do the following:
class PurchaseOrder extends React.Component {
...//omitted for brevity
render(){
{this.state.shouldPrint && (
<PortalWindow>
<OrderPrint order={order} />
</PortalWindow>
)}
}
}
So with a click of a button, I change the shouldPrint state to true and the printable version is displayed in a new window. However, the import './order-print.css'; statement seems to have no effect, so the style is not applied to the div that's in my OrderPrint.jsx file.
Here's the content of the order-print.css file:
.order-print{
border:3 px solid red;
}
So apparently, react does not pass the css to the view that's loaded in a new window. Is there a way to make this possible.
I've actually tried using style instead of className and referencing a const object that has styling information, and in fact, it works. but it's just I prefer using classes to inline styling.
So I'm using React, webpack-serve and less-loader and I have 2 very simple pages which load a different style file:
import React from 'react';
import { withRouter } from 'react-router-dom';
import 'less/index.less';
class IndexPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (<div>qqwdqddddeeewd</div>)
}
};
export default withRouter(IndexPage);
Both pages are importing a different less file, but when switching from the 1st page to the 2nd the style from the 1st page still remains in the 2nd page. (the import creates a <style></style> in the page)
What can I do to avoid that? How to do to have the 2nd page only having its imported style?
You can use inline style https://reactjs.org/docs/faq-styling.html. However according to React Doc CSS classes are generally more efficient than inline styles.
So, you can use nesting, and style inside a wrapper for each component.
class IndexPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (<div id="index">qqwdqddddeeewd</div>)
}
};
Then in your index.less
#index {
// style here for index page elements
}
import React, { Component } from 'react';
class one extends React.Component
{
constructor()
{
super();
this.state = {
number:26
}
}
render()
{
return(
<div></div>
);
}
}
export default one;
import React, { Component } from 'react';
import one from './one'
class HomePage extends React.Component
{
render()
{
return(
<div>{one.state.number}</div>
);
}
}
export default HomePage;
is it possible to access number state
is there any way to access state of one component into another component?
please suggest me if any solution is present.
As Shubam has explained it, Though I would like to form it as a complete answer
First of all, I would like to let you know that Never Use lowercase letters to name your React Components.So name your component to One instead of one.
Now Comming back to your question:-
No This is not Possible, If your app contains few components then it's better to pass the state object as the props, But if your app contains too many components then better to use predictable state containers like Redux or Flux rather than passing state as props.
So you may apply these changes and I hope You will get What You Desire:-
One Component:-
import React, { Component } from 'react';
import Homepage from './homepage';
class One extends React.Component
{
constructor()
{
super();
this.state = {
number:26
}
}
render()
{
return(
<Homepage data={this.state}/>
);
}
}
export default One;
Homepage Component:-
import React, { Component } from 'react';
class Homepage extends React.Component
{
render()
{
console.log("this is homepage",this.props);
return(
<div>{this.props.data.number}</div>
);
}
}
export default Homepage;
Please Raise Your doubts if any, Or if you find any error in it.
I want to extend the react-bootstrap component and modify some of the prototype to achive my component.Here is my code:
import React from 'react';
import { Pagination } from 'react-bootstrap';
export default class myPagination extends Pagination {
constructor(props) {
super(props);
}
render() {
return <div>test</div>;
}
}
But here is a error:Cannot read property 'bind' of undefined
Maybe the Pagination component is created by React.createClass so I can't extends the component?
How can I solve the problem?