ReactJS中的隐形视图(Invisible View in ReactJS)

ReactJS中的隐形视图(Invisible View in ReactJS)

我试图像android一样制作隐藏的view 。 这占据了空间，但并未向用户显示。

<View android:id="@+id/hiddenView" android:layout_width="30dp" android:layout_height="wrap_content" android:visibility="invisible" />

在ReactJS执行此操作的方法是什么？

I am trying to make hidden view as like android has. This occupies the space but it doesn't show to the user.

<View android:id="@+id/hiddenView" android:layout_width="30dp" android:layout_height="wrap_content" android:visibility="invisible" />

What is the way to do this in ReactJS ?

最满意答案

您可以使用visibility集hidden在您的react组件中的html元素样式中。 见下面的例子。

function InvisibleDiv() {
  return <div style={{width: '50', height:'50', backgroundColor: 'red',visibility: 'hidden'}}></div>;
}

ReactDOM.render(<InvisibleDiv />, document.getElementById('app')) 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div> 
  
 
You can use visibility set to hidden in the style of your html element in your react component. See example below.
 
 
 
  
  
function InvisibleDiv() {
  return <div style={{width: '50', height:'50', backgroundColor: 'red',visibility: 'hidden'}}></div>;
}

ReactDOM.render(<InvisibleDiv />, document.getElementById('app')) 
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>