Компонент класса React имеет свойство, но Typescript говорит, что его нет
У меня проблема с React ref и компонентом класса.
Мой упрощенный код ниже. Мы видим, что у меня есть компонент Engine со свойством getInfo. Я провожу тест this.activeElement &&, что означает, что это не null, поэтому это должен быть React.ReactElement<Engine>. Однако компилятор Typescript выдает ошибку из-за того, что у него нет свойства getInfo, как показано на снимке экрана ниже.
class Engine extends React.Component {
getInfo(count: number): void {
console.info('info count:', count);
}
}
class Wizard extends React.Component {
activeElement: null | React.ReactElement<Engine>
topLevelGetInfo(): void {
this.activeElement && this.activeElement.getInfo(10);
}
handleRef = (el: null | React.ReactElement<Engine>) => this.activeElement = el;
render() {
return (
<div>
<Engine ref = {this.handleRef} />
</div>
)
}
}
Мой tsconfig.json:
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"sourceMap": true,
"jsx": "react",
"baseUrl": "src",
"strict": true,
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
"exclude": [
"node_modules",
"build",
"build_test"
]
}
Ответы 2
Похоже, ваши классы Wizard и Engine не расширяются от React.Component. Попробуйте обновить объявления вашего класса следующим образом:
class Engine extends React.Component {
...
render() { return null; }
}
class Wizard extends React.Component {
...
}
Кроме того, не забудьте включить требуемый метод render() для вашего компонента <Engine /> (т. Е. Как показано).
Вот рабочий пример на codeandbox.io - надеюсь, что это поможет :-)
@Noitidart только что обновил ответ со ссылкой на рабочую демонстрацию - это помогает?
Где вы видите ошибку? В вашей среде разработки или в CodeSandbox?
@DacreDenny в обоих. Codebox и dev. Я очень ценю вашу попытку, поэтому я ставлю +1.
@Noitidart, пожалуйста, это очень странно, потому что я, кажется, не получаю никаких синтаксических ошибок, когда запускаю образец кодового окна - просто интересно узнать, как выглядит ваш файл tsconfig.json - вы можете добавить это в свой OP?
Спасибо @Dacre, я добавил tsconfig.
Для обеспечения предполагаемого доступа к getInfo - activeElement следует указывать как тип Engine (а не React.ReactElement<Engine>) или null.
activeElement также требует начального значения null, поскольку undefined недействителен.
// Engine.
class Engine extends React.Component {
// Get Info.
getInfo(count: number) {
console.info("Info Count:", count);
}
// Render.
render = () => <div>Engine</div>;
}
// Wizard.
export class Wizard extends React.Component {
// Active Element.
activeElement: Engine | null = null;
// Top Level Get Info.
topLevelGetInfo() {
const { activeElement } = this;
if (activeElement) activeElement.getInfo(10);
}
// Handle Ref.
handleRef = (el: Engine | null) => (this.activeElement = el);
// Render.
render() {
return (
<div>
Wizard.
<Engine ref = {this.handleRef} />
</div>
);
}
// Did Mount.
componentDidMount() {
console.info("Mounting Wizard.");
this.topLevelGetInfo();
}
}
О, большое спасибо, @Arman !! Engine на самом деле является одним из многих компонентов, которыми он может быть. Компонент должен иметь свойство getInfo, и в него внедряются некоторые свойства. Можно как-нибудь сделать React.ComponentType<{ prop1: blah }>?
К сожалению, моя ошибка, я забыл часть
extends React.Componentпри наборе упрощения. У меня все еще проблема :(