Как я могу скрыть элемент svg с помощью reactjs
Как я могу скрыть / показать элемент через атрибут видимости по его Id = "test" с учетом этого кода:
import * as React from 'react';
import ImageSvg from '../mysvg.svg';
export class Test extends React.Component {
constructor(props: any) {
super(props);
}
public render() {
return (<img src = {ImageSvg } />);
}
}
Ответы 4
Я буду использовать для этого реквизит. Что-то вроде :
render() {
if (!this.props.show){
return '';
}
return <img src = {ImageSvg } />;
}
Тогда вы можете использовать это как
<Test show = "true" />
Попробуйте условный рендеринг:
public render() {
return {this.props.show && <img src = {ImageSvg } />}
}
В этом случае, если свойство show будет true, тогда будет отображаться <img />, если нет, то ничего не будет отображаться.
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator
Надеюсь, код вам поможет.
public render(){
return (
<div>
{ this.state.show ? <img src = { ImageSvg } /> :'' }
</div>
);
}
Я имел в виду, как скрыть некий элемент ВНУТРИ изображения svg ?!
Вы можете скрыть с помощью css, когда используете условный рендеринг.
Если вы хотите, чтобы элемент занимал место при скрытии, чтобы макет не сдвигался, вы можете просто использовать встроенные стили с атрибутом видимости:
render() {
return (
<div style = {{ visibility: 'hidden'}}>
Hi guys
</div>
);
}
Таким образом, вы все равно будете визуализировать существующий элемент и просто контролировать видимость с помощью стиля.
Я имел в виду, как скрыть некий элемент ВНУТРИ изображения svg ?!