gpt4 book ai didi

reactjs - 使用 TypeScript 在 React.Component 中按名称(字符串)调用函数

转载 作者:行者123 更新时间:2023-12-04 17:40:25 25 4
gpt4 key购买 nike

我正在使用 TypeScript 编写 React 应用程序。我的组件状态如下所示:

type UploadState = {
...
modal: string | null
...
}

在我的render中我有:

render() {
return <div>{this.renderModal()}</div>
}

我在代码中的某处:

this.setState({ modal: 'mappingModal' })

最后 renderModel 是:

renderModal = () => {
if (this.state.modal === null) {
return
}
return this[modal as keyof this]() //It doesn't work
}

我希望得到 mappingModal 的返回值:

mappingModal = () => {
return <h1>Some text or whatever!</h1>
}

但由于 this[modal as keyof this]() 中的 () 而出现此错误:

Cannot invoke an expression whose type lacks a call signature.
Type '{}' has no compatible call signatures.ts(2349)

如果我删除 () 我会在浏览器中收到此错误:

Warning: Functions are not valid as a React child.
This may happen if you return a Component instead of <Component /> from render.
Or maybe you meant to call this function rather than return it.

有什么解决办法吗?

更新(可能的答案)

似乎如果我使用 this[modal as keyof Upload]() - Upload 当然是我的组件名称 - 我不会有任何问题。希望它不会导致任何 future 的错误

最佳答案

似乎如果我使用 this[modal as keyof Upload]() - Upload 当然是我的组件名称 - 我不会有任何问题。像这样:

class Upload extends React.Component<UploadProps, UploadState> {
...
renderModal = () => {
if (this.state.modal === null) {
return
}
return this[modal as keyof Upload]()
}
...
}

关于reactjs - 使用 TypeScript 在 React.Component 中按名称(字符串)调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54769248/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com