React 組件上的 Typescript 錯誤：“元素”類型的參數不可分配給類型的參數

Question

我不確定它為什么在這里抱怨 TBH，這個錯誤讓我感到困惑。

createLinkSetsForCountry

function createLinkSetsForCountry(country: Country, companies: Array<Company>) {
    let companyLinks: Array<LinkItem> = [];
    const companyLinkSets = [];

    for (const company of companies) {
        companyLinks.push(<LinkItem company={company} key={company.id} />);

        companyLinkSets.push(
            <LinkSet
                className="ft-link-set"
                country={country}
                key={company.id}
                links={companyLinks} />
        );
        companyLinks = [];
    }

    return (
        <div>
            <ListHeader country={country} />
            <div>{companyLinkSets}</div>
        </div>
    );
}

鏈接項

export class LinkItem extends Component<{ company: Company, key: number }> {
    render() {
        const { company } = this.props,
            hasApp = (company.interview
                && company.interview.app
                && company.interview.app.hasAppp),
            uri = company.notInterviewed ? `companies/${company.id}/details` : `/interviews/companies/${company.id}`,
            className = `margin-top-10 margin-bottom-10 ${
                company.notInterviewed ? 'ft-company-not-interviewed' : ''
            }`;
        const link = (
            <Link className={className} id={company.id.toString()} to={uri}>
                <span id="company-name">{company.name}</span>
            </Link>
        );

        return (
            <div className="company-link vertical-align-top inline-block">
                <div>
                    <li className="margin-0">{link}</li>
                </div>
                {hasApprenticeship && (
                    <div className="align-center ft-tags margin-0" id="tags">
                        <span
                            className="ink-tooltip ink-badge category-badge font-9 inline ft-apprenticeship-tag"
                            data-tip-color="tooltip"
                            data-tip-text="offers dddd"
                            data-tip-where="up">
              A
                        </span>
                    </div>
                )}
            </div>
        );
    }
}

Answer 1

基本上，您的companyLinks是 React 元素列表而不是LinkItem ，因此只需更改以下內容即可：

let companyLinks: Array<React.ReactElement> = [];