使用CSS类的React选项卡式系统

Question

我有5个div和5个按钮。在单击的每个按钮上，都会显示一个div。其他四个都藏起来了。我只是想问有没有其他更好的方法。尽可能多地提出建议。非常感谢。

let id1 = React.createRef()
let id2 = React.createRef()
let id3 = React.createRef()
let id4 = React.createRef()
let id5 = React.createRef()
function iid1() {
id1.current.classList.remove('hidden')
id1.current.classList.add('contents')
id2.current.classList.add('hidden')
id3.current.classList.add('hidden')
id4.current.classList.add('hidden')
id5.current.classList.add('hidden')
}
function iid2() {
id1.current.classList.add('hidden')
id2.current.classList.remove('hidden')
id2.current.classList.add('contents')
id3.current.classList.add('hidden')
id4.current.classList.add('hidden')
id5.current.classList.add('hidden')
}
function iid3() {
id1.current.classList.add('hidden')
id2.current.classList.add('hidden')
id3.current.classList.remove('hidden')
id3.current.classList.add('contents')
id4.current.classList.add('hidden')
id5.current.classList.add('hidden')
}
function iid4() {
id1.current.classList.add('hidden')
id2.current.classList.add('hidden')
id3.current.classList.add('hidden')
id4.current.classList.remove('hidden')
id4.current.classList.add('contents')
id5.current.classList.add('hidden')
}
function iid5() {
id1.current.classList.add('hidden')
id2.current.classList.add('hidden')
id3.current.classList.add('hidden')
id4.current.classList.add('hidden')
id5.current.classList.remove('hidden')
id5.current.classList.add('contents')
}

我只是希望上面的代码更高效&可读。我正在寻找javascript的最佳实践。你也可以告诉我你会解决这个问题。我不是在找答案。我来这里是为了寻求最佳实践，非常感谢。

Answer 1

使用state来标识哪个div是所选的。按钮将更改状态，您的应用程序将重新渲染，调整div的classNames。

const App = () => {

const [selected,setSelected] = React.useState(0);
const DIV_IDS = [0,1,2,3,4,5];

const selectItems = DIV_IDS.map((item) => {
return(
<button onClick={() => setSelected(item)}>{item}</button>
);
});

const divItems = DIV_IDS.map((item) => {
return (
<div key={item} className={selected === item ? 'visible' : 'hidden'}>
I am div {item}
</div>
);
});
return(
<div>
<div>{selectItems}</div>
<div>{divItems}</div>
</div>
);
};
ReactDOM.render(<App/>, document.getElementById('root'));

.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

最好只在JSX元素类中包含该类。类似于：

<element className={(condition_for_shown) ? 'contents' : 'hidden'}>
...
</element>

然后每个按钮将是：

<button type="button" onClick={() => setStateConditonToSomething}>
...
</button>

注意，您需要将条件存储在useState的反应状态中，或者以任何方式存储。

Answer 3

我的做法是-

const DivHidingComponent = ({ elementCount = 5 }) => { // element count defaults to 5
const [visibilityIndex, setVisibilityIndex] = useState(0);
const onClickCallback = useCallback((index) => () => {
setVisibilityIndex(index);
})

const buttonGroup = useMemo(() => {
const buttonGroup = [];
for (let i = 0; i < elementCount; i++) {
buttonGroup.push(
<button key={`${i}-button`} onClick={onClickCallback(i)} />
)
}
return buttonGroup;
},  [elementCount])
// only re-runs on a button click
const divGroup = useMemo(() => {
const divGroup = [];
for (let i = 0; i < elementCount; i++) {
divGroup.push(
<div key={`${i}-div`} style={{ visibility: visibilityIndex === i ? 'visible' : 'hidden'  }} />
);
}
return divGroup;
},  [visibilityIndex]);

return (
<div>
<div>
{buttonGroup}
</div>
<div>
{divGroup}
</div>
</div>
);
}

我直接在div组循环中设置样式，但您可以指定类名或根据需要设置样式。

Div的可见性由单击按钮驱动的可见性指数设置。

我在props中传递了elementCount变量，这样你就可以将其扩展到你想要的元素数量。5或1000。我为elementCount分配了一个值5，当初始化组件时没有传递任何值时，该值将作为默认值。

此外，您可以删除useMemo和useCallback钩子，它仍然可以执行。但是，如果将元素计数设置为10000，这将有助于提高性能。有了这些钩子，它只会在重新渲染时重新构建div组。这就是运行循环20k次(按钮10k，潜水器10k(的区别。

我添加了最后一段，以防你不知道React Hooks！

我希望这能有所帮助！