如何在react js中添加属性和添加类?

Question

我想在react js中添加属性和添加类。我试着用react来生成TABS。当Tab元素宽度大于45px时，我想添加hidden类和新属性aria-hidden，其值为true。你能告诉我怎么做吗?

<<p>组件/strong>

<Tabs>
{data.map((i, index) => (
<li key={index}>{i}</li>
))}
</Tabs>

Tabs.js

const getTabs = () => {
console.log("get tabs");
const { blockWidth, tabsTotalWidth, tabDimensions, showMoreWidth } = state;
let tabIndex = 0;
let availableWidth = blockWidth - showMoreWidth;
return children.reduce(
(result, tabItem, index, arr) => {
const { key = index } = tabItem.props;
const tabWidth = tabDimensions[key] ? tabDimensions[key].width : 0;
if (tabWidth < 45) {
//  aria-hidden= false
// remove hidden class tabItem if present.
result.tabsVisible.push(tabItem);
} else {
//  aria-hidden= true
// add hidden class tabItem
result.tabsHidden.push(tabItem);
}
/* eslint-enable no-param-reassign */
availableWidth -= tabWidth;
return result;
},
{
tabsVisible: [],
tabsHidden: []
}
);
};

这是我的代码

https://codesandbox.io/s/reverent-hermann-yt7es?file=/src/tabs.js: 2147 - 2486

我像这样渲染标签

return (
<ul ref={tabsRef} className="rc64nav">
{/* {children} */}
{tabsVisible.reduce((result, tabItem, tabIndex) => {
result.push(tabItem);
return result;
}, [])}

{tabsHidden.reduce((result, tabItem, tabIndex) => {
result.push(tabItem);
return result;
}, [])}
</ul>

Answer 1

对于类，可以简单地添加className属性。您可以添加与HTML元素完全相同的属性。