代码之家 › 专栏 › 技术社区 › user1283776

“this”隐式具有类型“any”,因为它没有类型批注。在函数上调用bind时

typescript reactjs

user1283776 · 技术社区 · 6 年前

代码:

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;

1 回复 | 直到 6 年前

Explosion Pills 6 年前

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} .