I have a ReactJS render function that generates a html element with a style. However, the produced HTML doesn't contain this style. What am I doing wrong?
<a href="javascript:void(0);"
className={cx('img','box','med','no_img','photo','act')}
style={{
backgroundImage : `url:(${config.getUploadUrl()}/${photoDir}/main_${photo})`
}} />
HTML
remove the : after url its invalid value for backgroundImage
Related
content={
<span>
<img className="rounded-circle img_center"
src={icon} alt="" />
</span>
}
if the content is the prop and that has above image content.
<span dangerouslySetInnerHTML={{ __html: content }} />;
This is rendered as [object object], how this can be handled. Also is there a way to use fragments instead of span tag to render dangerouslySetInnerHTML
in that case you dont need to use dangerouslySetInnerHTML but use this library
jsxt-to-string
You're not passing HTML you're passing an object (in this case apparently JSX). When an object is rendered directly as HTML it comes out as [object object]. It'll be the className that's causing it to be read as an object rather than just incorrect HTML.
Use a div rather than span.
I have added span tag in between the img tag so its giving an error Please Explain Why it is giving an error. What the exactly problem is...
<img src="any demo images here" alt="Nadeem">
<span>adeem</span>
</img>
The reason is because the img tag can not have any child elements.
To get the result you are looking for you may want to wrap both the img and span in a wrapper div like this.
<div style={{position: "relative"}} />
<img src="any demo images here" alt="Nadeem">
<span style={{position:"absolute", bottom: "0px", margin: "0px auth"}}>adeem</span>
</div>
(I am not sure if this is what you are looking for but assuming so from your question)
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I am new to react and could not grasp the concept between bsClass and className.
I try to implement a modified button style, like:
<Button bsClass="btn-custom" >Custom button</Button>
where it does not work when I substitute bsClass with className.
But in other part, using the same custom.css source, I implement:
<img src={logo} alt="logo" className="app-logo" /> and it works.
JSX attribute className is equivalent of HTML class. So the below JSX
<span className="app-logo">Logo</span>
will be equivalent to the below in HTML
<span class="app-logo">Logo</span>
As per bsClass is considered in
<Button bsClass="btn-custom" >Custom button</Button>
it is prop that is being passed on to the Button component in reactJS and that is what it will be using to set the className inside the component something like
<button className={this.props.bsClass}>{this.props.children}</button>
So it an attribute that is defined as a property by the react-bootstrap docs.
React's className is exactly equivalent to regular classes in CSS.
HTML/CSS:
<div class='red-text'>
Foo
</div>
React/JSX:
<div className='red-text'>
Foo
</div>
The above snippets of code do the exact same thing. The only reason we're stuck with using className in React (instead of class) is because "class" was already taken as a reserved keyword in JavaScript.
As the others have said, bsClass is a pre-defined class within the react-bootstrap package. Just like how the CSS-version of Bootstrap comes with its own styling, so, too, does react-bootstrap.
A practical difference. I you set bsClass to something other than what REACT-Bootstrap has as a default, you have to do your own css themeing of the button.
By adding a className="xx" you still get the default theme, but you can now add css styles for color, padding, etc, using your own .css
.xx {
magin-bottom: 2px
}
I am using angular 1.5 component. I have created a component and used it inside the template
<ul>
<li>
<a>Some action here</a>
</li>
<li>
<my-component></my-component>
</li>
</ul>
inside this my-component I have code for
<a></a>
and css properties are defined as ul li a, because of the component name I am unable to access the element in css using the above selector.
Is there any way out for this ?
You can - in your css file - do:
my-component {
//your styles
}
http://plnkr.co/edit/Lw18LtUVuHfSZU05b6R9?p=previewplunker, see last component
I have face this problem earlier, just try to add
replace: true
property on your directive.
hope it will also work for you.