我用参数创建一个对象。

const bg1 = {
    "data-background": "image/slider/slider1.jpg"
}

<div className="slider-area over-hidden" {...bg1}></div>

你需要创建一个你想要添加到div的属性的对象。

function Slider() {
  const attrs = { 'data-background': 'images/slider/slider1.jpg' };

  return (<div className="slider-area over-hidden" {...attrs} />);
}

function Slider() {

  const bg1 =' data-background="images/slider/slider1.jpg"';

  return (<>

    <div className="slider-area over-hidden" `${bg1}`></div>
                                             ^ add this operator
    );
}

它不工作有三个原因：
1.没有关闭</>为您的开放<>，所以这将炸弹您的程序。
1.这个className="slider-area over-hidden" {bg1}不是在JSX中如何concat一个字符串。
1.最后，data-background="images/slider/slider1.jpg"并不是你在元素中添加an属性的方法。相反，正如其他人所指出的，这是如何做到的：

const attrs = {'data-background': 'images/slider/slider1.jpg'};

  return (<div className="slider-area over-hidden" {...attrs} ></div>);

const tabs = {"dadosFuncionais" : {'data-te-nav-active':''}, "dadosPessoais": {}}
    
    const [tabSelected, setTabSelected] = useState(tabs)
    
    const handleTabsClick = async (event) => {
        console.log(tabSelected)
        switch(event.target.dataset.menu) {
          case 'dadosFuncionais':
            console.log('dados funcionais '+tabSelected.dadosFuncionais)
            setTabSelected({"dadosFuncionais" : {'data-te-nav-active':''}, "dadosPessoais": {}})
            break;
          case 'dadosPessoais':
            console.log('dados pessoais '+tabSelected.dadosPessoais)
            setTabSelected({"dadosFuncionais" : {}, "dadosPessoais": {'data-te-nav-active':''}})
            break;
          default:
            // code block
        }
      }

HTML:

    <li role="presentation">
    <a
      href="#tabs-home"
      className="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
      data-te-toggle="pill"
      data-te-target="#tabs-home"
      {...(tabSelected.dadosFuncionais)}
      role="tab"
      aria-controls="tabs-home"
      aria-selected='false'
      data-menu="dadosFuncionais"
      onClick={handleTabsClick}
      >Dados Funcionais</a
    >
  </li>
  <li role="presentation">
    <a
      href="#tabs-profile"
      className="my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
      data-te-toggle="pill"
      data-te-target="#tabs-profile"
      {...(tabSelected.dadosPessoais)}
      role="tab"
      aria-controls="tabs-profile"
      aria-selected='false'
      data-menu="dadosPessoais"
      onClick={handleTabsClick}
      >Dados Pessoais</a
    >
  </li>