react js中如何添加属性和添加类？

Question

我想在 react js 中添加属性和类。我正在尝试使用 react 创建TABS。当Tab 元素宽度大于45px 和新属性@ 时，我想添加hidden 类987654326@ 的值为 true 。 你能告诉我怎么做吗？

组件

<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 元素完全相同的属性。