属性名称的类型必须是"字符串"、"数字"、"符号"或"任意"

Question

我想把这个JavaScript文件转换成Typescript:

import React, { useState } from 'react';
import { Button } from './Button';
import { Link } from 'react-router-dom';
import './Navbar.css';
import SettingsDropdown from "./SettingsDropdown";
import BillingDropdown from "./BillingDropdown";
function Navbar() {
const [click, setClick] = useState(false);
const [dropdown, setDropdown] = useState({
settings: false,
billing: false
});
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const onMouseEnter = (name: String) => {
if (window.innerWidth < 960) {
setDropdown(state => ({ ...state, [name]: false }));
} else {
setDropdown(state => ({ ...state, [name]: true }));
}
};
const onMouseLeave = (name: String) => {
setDropdown(state => ({ ...state, [name]: false }));
};
return (
<>
<nav className='navbar'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
Merchant Hub
<i class='fab fa-firstdraft' />
</Link>
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li
className="nav-item"
onMouseEnter={onMouseEnter.bind(this, 'settings')}
onMouseLeave={onMouseLeave.bind(this, 'settings')}
>
<Link
to="/settings"
className="nav-links"
onClick={closeMobileMenu}
>
Settings <i className="fas fa-caret-down" />
</Link>
{dropdown.settings && <SettingsDropdown />}
</li>
<li
className="nav-item"
onMouseEnter={onMouseEnter.bind(this, 'billing')}
onMouseLeave={onMouseLeave.bind(this, 'billing')}
>
<Link to="/billing" className="nav-links" onClick={closeMobileMenu}>
Billing <i className="fas fa-caret-down" />
</Link>
{dropdown.billing && <BillingDropdown />}
</li>
<li className='nav-item'>
<Link
to='/support'
className='nav-links'
onClick={closeMobileMenu}
>
Support
</Link>
</li>
<li className='nav-item'>
<Link
to='/developers'
className='nav-links'
onClick={closeMobileMenu}
>
Developers
</Link>
</li>
<li>
<Link
to='/sign-up'
className='nav-links-mobile'
onClick={closeMobileMenu}
>
Profile
</Link>
</li>
</ul>
<Button />
</nav>
</>
);
}
export default Navbar;

我不知道如何修改这些行:

setDropdown(state => ({ ...state, [name]: false }));-我得到错误TS2464: A computed property name must be of type 'string', 'number', 'symbol', or 'any'.

onMouseEnter={onMouseEnter.bind(this, 'settings')}-获取错误TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.

你知道我怎么解决这些问题吗?

编辑:我这样更新代码:

import React, { useState } from 'react';
import { Button } from './Button';
import { Link } from 'react-router-dom';
import './Navbar.css';
import SettingsDropdown from "./SettingsDropdown";
import BillingDropdown from "./BillingDropdown";
function Navbar() {
const [click, setClick] = useState(false);
const [dropdown, setDropdown] = useState({
settings: false,
billing: false
});
const handleClick = () => setClick(!click);
const closeMobileMenu = () => setClick(false);
const onMouseEnter = (name: string) => {
if (window.innerWidth < 960) {
setDropdown(state => ({ ...state, [name]: false }));
} else {
setDropdown(state => ({ ...state, [name]: true }));
}
};
const onMouseLeave = (name: string) => {
setDropdown(state => ({ ...state, [name]: false }));
};
return (
<>
<nav className='navbar'>
<Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
Merchant Hub
<i class='fab fa-firstdraft' />
</Link>
<div className='menu-icon' onClick={handleClick}>
<i className={click ? 'fas fa-times' : 'fas fa-bars'} />
</div>
<ul className={click ? 'nav-menu active' : 'nav-menu'}>
<li className='nav-item'>
<Link to='/' className='nav-links' onClick={closeMobileMenu}>
Home
</Link>
</li>
<li
className="nav-item"
onMouseEnter={() => onMouseEnter('settings')}
onMouseLeave={() => onMouseLeave('settings')}
>
<Link
to="/settings"
className="nav-links"
onClick={closeMobileMenu}
>
Settings <i className="fas fa-caret-down" />
</Link>
{dropdown.settings && <SettingsDropdown />}
</li>
<li
className="nav-item"
onMouseEnter={() => onMouseEnter('billing')}
onMouseLeave={() => onMouseLeave('billing')}
>
<Link to="/billing" className="nav-links" onClick={closeMobileMenu}>
Billing <i className="fas fa-caret-down" />
</Link>
{dropdown.billing && <BillingDropdown />}
</li>
<li className='nav-item'>
<Link
to='/support'
className='nav-links'
onClick={closeMobileMenu}
>
Support
</Link>
</li>
<li className='nav-item'>
<Link
to='/developers'
className='nav-links'
onClick={closeMobileMenu}
>
Developers
</Link>
</li>
<li>
<Link
to='/sign-up'
className='nav-links-mobile'
onClick={closeMobileMenu}
>
Profile
</Link>
</li>
</ul>
<Button />
</nav>
</>
);
}
export default Navbar;

对于这行<i class='fab fa-firstdraft' />我得到TS2322: Type '{ class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.   Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'. Did you mean 'className'?任何想法如何解决这个问题?

Answer 1

你不能在React中使用class，使用className代替。

Answer 2

我认为问题是你正在使用字符串对象类型。修改String为string