我正在嘗試有條件地隱藏組件
方法 1：添加 style = display : none 到 div
有沒有辦法通過狀態動態地將顯示添加到 div？
由于所有組件都在 Div 中，如何隔離每個渲染組件并添加 display none ？
有沒有辦法添加可以觸發 css 的狀態/將 css 添加到某些反應組件？
import React, { Component } from 'react';
import all the component A, B AND C
class App extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<Component A/>
<Component B/>
<Component C/>
</div>
);
}
}
export default App;
uj5u.com熱心網友回復：
在運行時選擇型別：
import { ComponentA } from './ComponentA';
<div>
{(() => {
// capitalized variable first
let Component = <p>Error!</p>;
if (/google/.test(this.state.url)) {
Component = ComponentA
}
return <Component />
})()}
</div>
uj5u.com熱心網友回復：
您可以有條件地渲染組件，而不是使用 css 來實作：
{true_condition && ( <Component /> )}
uj5u.com熱心網友回復：
這似乎部分重復了這個問題。
您可以像這樣動態設定類的值：
renter() {
return (
<div className={is_displayed ? "showItClassName" : "dontShowItClassName"} >
...
</div>
);
這可能是更好的方法，因為您可以重用您的 css 類。如果您不希望條件位于 html 標記的中間，您可以提前使用類名創建變數或呼叫函式。
如果您確定要使用樣式標簽，則需要額外的花括號。
render() {
return (
<div style={is_displayed ? {display:"block"}: {display:"none"}} >
<Component A/>
<Component B/>
<Component C/>
</div>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/487290.html
標籤：javascript 反应