Question

代码：

const renderSections = techSpecTableData.sections.map((section: Section, index: number) => {
    return (
        <div key={index} className="tech-spec-table-section">
            <div className="tech-spec-table-section__heading">{section.heading}</div>
            {renderRows.bind(this, section.rows)}
        </div>
    );
});

警告：

[ts] 'this' implicitly has type 'any' because it does not have a type annotation.

这应该是什么类型？我真的不知道而且我不会使用this。我只想通过section.rows。

编辑：这是该组件的完整代码，其中包含上面的部分以及其他代码。

import * as React from 'react';
import './TechSpec.css';

interface Section {
    heading: string;
    rows: Row[];
}

interface Row {
    label: string;
    values: string[];
}

const techSpecTableData = {
    ...
};

const renderRows = ((rows: Row[]) => {
    return (
        <div key={index}>
            ...
        </div>
    );
});

const renderSections = techSpecTableData.sections.map((section: Section, index: number) => {
    return (
        <div key={index} className="tech-spec-table-section">
            <div className="tech-spec-table-section__heading">{section.heading}</div>
            {renderRows.bind(this, section.rows)}
        </div>
    );
});

const renderHeadings = techSpecTableData.headings.map((heading: string, index: number) => {
    return (
        <div key={index} className="tech-spec-table__header__heading">
            {heading}
        </div>
    );
});

const TechSpec = () => {
    return (
        <div className="tech-spec">
            <div className="content-container">
                <h2 className="heding--h2 heading--emphasized">
                    Technical Specification
                </h2>

                <div className="tech-spec-table__header">
                    {renderHeadings}
                </div>
                <div className="tech-spec-table__sections">
                    {renderSections}
                </div>
            </div>
        </div>
    );
};

export default TechSpec;

Answer 1

this很有可能就是window。 TypeScript可能对此一无所知。此外，您很可能不想使用它。只需renderRows(section.rows)就可以了。

但是，我建议您使用组件而不是使用renderX函数。这样做很容易，因为您已经将它们作为函数了-到功能组件的过渡应该很小。

const Section = ({ section }) => (
  <div>
    ... row content ...
  </div>
);

const Sections = ({ sections }) =>
  sections.map((section, index) => <Section section={section} key={index} />);

const TechSpec = () => (
  ...
  <div className="tech-spec-table__sections">
    <Sections sections={techSpecTableData.section} />
  </div>
  ...
);

请注意，如果可能的话，我会使用key={section.id}或类似的方法，而不是key={index}。

“ this”隐式具有类型“ any”，因为它没有类型注释。调用功能上的绑定时

1 个答案: