我有一个React组件,可以通过一个数组进行映射。
每个数组项都有一个可选的ID类型。
如果我有这个ID,我将渲染一个元素,否则什么也不做。
该元素具有一个onClick事件,它调用一个函数并接受ID作为参数。
即使我检查过是否有ID,TypeScript仍然会抱怨ID可能是未定义的,但只会在onClick方法内部才会出现此问题(请参阅代码示例)。
为什么会这样?如何消除这个错误?
// fake bindings
declare namespace React {
function createElement(): any;
}
// This type has an optional prop
type SampleType = {
id?: string;
name: string;
}
const sampleArray: SampleType[] = [{id: 'test', name: 'Adrian'}, {name: 'Florescu'}]
function sampleFunction(id: string){
console.log('ID', id);
}
function SampleComponent() {
return (
<div>
{sampleArray.map((item: SampleType) => {
if(item.id) {
sampleFunction(item.id); // This works
return <p onClick={() => { sampleFunction(item.id); }}>{item.name}</p>; //// This does not work
}
})}
</div>
)
};
const dom = <SampleComponent />;