как я могу скрыть элемент SVG с реагировать

Question

Как я могу скрыть / показать элемент с помощью атрибута видимости по его 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 } />);
    }
}

Answer 1

Если вы хотите, чтобы элемент занимал пространство при скрытии, чтобы макет не сдвигался, вы можете просто использовать встроенные стили с атрибутом видимости:

  render() {
    return (
      <div style={{ visibility: 'hidden'}}>
        Hi guys
      </div>
    );
  }

Таким образом, у вас все равно будетсуществующий элемент отображается и просто контролирует видимость с помощью стилей.

Answer 2

Попробуйте условный рендеринг:

    public render() {
        return {this.props.show && <img src={ImageSvg } />}
    }

В этом случае, если свойство show будет true, тогда <img /> будет отображаться, если нет, то ничего не будет отображаться.

https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Answer 3

Надеюсь, код поможет вам.

public render(){
  return (
    <div>  
        { this.state.show ? <img src={ ImageSvg } /> :'' }  
    </div>
  );
} 

Answer 4

Я буду использовать реквизит для этого.Что-то вроде:

  render() {
  if(!this.props.show){
    return '';
  }
    return <img src={ImageSvg } />;
  }

Тогда вы можете использовать его как

<Test show="true" />