タグ付きの反応で隠し属性を配置する

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> 
} 

希望に応じます。