Question

如何通过其ID =＆＃34; test＆＃34;通过可见性属性隐藏/显示元素？鉴于该代码：

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

我希望代码可以帮助你。

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

Answer 2

我将使用道具。类似的东西：

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

然后你可以像

一样使用它

<Test show="true" />

Answer 3

尝试条件渲染：

    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 4

如果您希望项目在隐藏时占用空间以便布局不会移动，您可以简单地使用具有可见性属性的内联样式：

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

通过这种方式，您仍然可以渲染现有元素，并通过样式控制可见性。

如何用reactjs隐藏svg元素

4 个答案: