My image Component won't seem to actually put the image in, the URL is correct as I can add it by physically adding the HTML into the page.
The component seems to be failing. I tried what I found at http://facebook.github.io/react/docs/jsx-in-depth.html#attribute-expressions
but it did not help.
export default class mainLogo extends React.Component {
render() {
return (
<div>
<img src = {'/src/app/assets/images/home/mainLogo.png'}/>
</div>
);
}
}
The class name should start with a capital letter (MainLogo) and you shouldn't use {} on the src, because you are sending the img url directly to the src. It's not a variable or state.
This should work:
export default class MainLogo extends React.Component {
render() {
return (
<div>
<img src='/src/app/assets/images/home/mainLogo.png' />
</div>
);
}
}
Related
In my code I have to use the same lines of code at different places. So i thought that's the right time to put this code into a kind of base class. I've read about Higher-Order Components which seems to be the way to go and following some examples i ended up with the following code, which is not working. I've tried something around but was not able to get it work.
My HOC:
export interface HocProps {
DynamicId: string
}
const withDiv = (hocProps) => (BaseComponent) => {
return class extend React.Component {
render() {
return (
<div id={ hocProps.DynamicId }>
<BaseComponent />
</div>
);
}
}
}
export default withDiv;
A component to be wrapped by the div:
import withDiv from './MyHoc';
class MyComponent extends React.Component {
render() {
return (
<h3>Some content here</h3>
);
}
}
export default withDiv({ DynamicId: <dynamic value> })(MyComponent);
Another component, that uses MyComponent:
import MyComponent from './MyComponent';
export class OtherComponent extends React.Component {
render() {
return (
<div>
... Some content here ...
<MyComponent DynamicId={ 'id123' } />
</div>
);
}
}
I'd like to pass an id to in OtherComponent. Then in MyComponent this id has to be passed to the HOC as , which is not working. I only can pass static values to the HOC.
I'm new to react and I think i've made same mistake(s).
So my question is: What am i doing wrong and how is it done right?
Maybe there is another/better way for this?
Thanks in advance.
Edit:
I would expect this result:
<div>
... Some content here ...
<div id='id123'>
<h3>Some content here</h3>
</div>
</div>
There are two ways you can use HOCs according to your implementation.
I have created a sandbox, which will help you understand how to use HOCs.
One way is to extract your props out const hocWrapper = Component => props => { // return NewComponent and call it too }. Here you have to call your component while returning.
Other way is to destructure or use the props inside hocWrappers. const hocWrapper = Component => { // return NewComponent, you will receive props inside the newComponent and do what you wish}
Try this
const withDiv = (BaseComponent) => {
class CompWithDiv extends React.Component {
render() {
return (
<div id={this.props.DynamicId}>
<BaseComponent />
</div>
);
}
}
return CompWithDiv ;
}
export default withDiv;
Im not sure how you pass the dynamic values and whats wrong with it. but, you can just create your component like
export interface MyCustomProps {
customProp: string;
}
export interface MyCustomState {
something: string;
}
class MyComponent extends React.Component<MyCustomProps, MyCustomState>{
render(){<div>
... Some content here ...
<div>{this.props.customProp}</div>
</div>}
}
export default MyComponent
and use it in another component like
import MyComponent from './MyComponent';
export class OtherComponent extends React.Component {
render() {
return (
<div>
... Some content here ...
<MyComponent customProp={someDynamicStringValues}/>
</div>
);
}
}
and you can do it recursively
I Have a react-loading-skeleton in my component, i have a static image in my page that i loaded using img tag, i want to show a skeleton component until the image loads.
I tried react.lazy and suspense but it only shows until the component load not works until image loads completely.
import React from 'react';
export default class SlideItems extends React.Component {
render() {
return (
<div>
<img src={require("./someImg.jpg")}/>
</div>
);
}
}
Start by adding constructor and state to class:
constructor(props) {
super(props);
this.state = {
image: '',
}
}
You can then add onLoad property to image tag like this:
<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
And create function that handles image loading:
handleImageLoaded() {
this.setState({ image: 'loaded' });
}
Then in render you can do something like this:
render() {
return (
<div>
{!this.state.image &&
<SkeletonComponent/>
}
<img src={require("./someImg.jpg")} onLoad={this.handleImageLoaded.bind(this)}/>
</div>
);
}
I have header.htm and footer.htm files and I would like to add these two files into my reactjs app. I tried to create header.htm as a component and render it in my app.js but it display as a string on the top not a page. ie. http://mydomain/include/header.htm. How do I solve this problem?
import React, { Component } from 'react';
class Header extends Component {
createMarkup()
{
return { __html: "https://mydomain/include/header.htm"};
}
render(){
return (
<div dangerouslySetInnerHTML={this.createMarkup()} ></div>
);
}
}
export default Header;
app.js
class App extends Component {
render(){
return (
<Header />
)
}
}
I have an react application, that I created with Create-React-App. My objective is when a user clicks on an image, the image changes. So, I want the image to come from the props.
For some reason, this code does not work.
<img alt="mug shot" src={this.props.photo} />
However, this works
<img alt="mug shot" src={require('../../Assets/Photos/Four.png')}/>
What am I doing wrong here?
I assume you are bundling your app using Webpack. Probably, you might be using a file-loader/url-loader to process the image. So, when you require something that ends with image file extension, webpack runs the contents of that file through this loader. For more information, check https://survivejs.com/webpack/loading/images/
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
img:'https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg'
}
this.changeImg = this.changeImg.bind(this);
}
changeImg() {
this.setState({
img:'http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg'
})
}
render() {
return(
<div>
<ImageChande change={this.changeImg} src={this.state.img} />
</div>
);
}
}
class ImageChande extends React.Component {
render() {
return(
<div>
<img onClick={this.props.change} alt="something" src={this.props.src} />
</div>
);
}
}
my page.js
class R1 extends React.Component {
render() {
return (
<div className="r1">
<h1>level1</h1>
</div>
);
}
}
class R2 extends React.Component {
render() {
return (
<div className="r2">
<h1>level2</h1>
</div>
);
}
}
my main.js
important * as Page from './page';
class App extends React.Component {
render() {
return (
<div className="r1">
<Page.R+level/>
</div>
);
}
}
Skip getInitialState,
I want to dynamic render with level.
I try React.renderComponent(<Page.R+this.state.level />, document.body);
It's not working with failed: SyntaxError
Is there more easily way? or is dynamic render available?
thanks
Not sure how you are exporting your Components so there is an assumption here, generally it is convention to put them in different files.
You can render in your parent component using an if statement inside JSX like this:
class App extends React.Component {
render() {
var renderPage;
if (something) {
renderPage = <PageOne />;
} else {
renderPage = <PageTwo />;
}
return (
<div>
{renderPage}
</div>
);
}
}
main.js can be modified like this to achieve what you want
import * as Page from './page';
class App extends React.Component {
render() {
const level = 2;
return (
<div className="r1">
{/*You use loop over list to get value of level and render all the pages*/}
{React.createElement(Page[`R${level}`], null)}
</div>
);
}
}
Page is an object and we are trying to access the pages and rendering the component name which is in string type.