在標籤中放置隱藏屬性

Question

我試圖將「隱藏」屬性與React放在一起。 這是我試過的。 它應該套/基於寬度刪除隱藏屬性：

function Welcome(props) { 
 
    return <h1 hidden={(window.innerWidth < 1024) ? "hidden" : ''}>Hello</h1>; 
 
} 
 

 
const element = <Welcome name="Sara" />; 
 
ReactDOM.render(
 
    element, 
 
    document.getElementById('root') 
 
);

<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="root"> 
 
</div>

Answer 1

如果你需要自定義屬性 - 你必須使用

data-attribute={(window.innerWidth < 1024) ? 'hidden' : ''} 

如果您需要設置hidden="hidden" - 你必須使用

hidden={(window.innerWidth < 1024) ? 'hidden' : ''} 

在結果你必須有這樣的事情：

function Welcome(props) { 
    return <h1 
     data-attribute={(window.innerWidth < 1024) ? 'hidden' : ''} 
     hidden={(window.innerWidth < 1024) ? 'hidden' : ''} 
    >Hello</h1>; 
} 

Answer 2

你可以做這樣的事情：（放置自定義屬性只是添加「數據-...」）

function Welcome(props) { 
return window.innerWidth < 1024 ? <h1 data-attribute="hidden" >Hello</h1> : <h1>Hello</h1> 
} 

希望有幫助。