Как вызвать компонент класса с переменной?
У меня есть эта функция, с заголовком. Как я могу вызвать что-то вроде:
<LayerEditPost test = {"Это работает!"} />, чтобы мой {это.состояние.тест} изменился?
В функциональных компонентах я могу передавать свойства для вызова своих компонентов, но это не работает с компонентами класса (свойство «тест» не существует для типа «IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{}>)
Я не уверен, где я должен объявить свою переменную, чтобы я мог получить значение из вызова компонента.
export class LayerEditPost extends React.Component<{}, {test: string, open: boolean}> {
constructor(props) {
super(props);
this.state = { open: false, test: "hi" };
this.toggleDrawer = this.toggleDrawer.bind(this);
}
toggleDrawer(e) {
console.info("click", e);
this.setState({ open: !this.state.open });
}
render() {
return (
<>
<IconLink icon = {object___pencil} iconVariant = {"solid"} onClick = {this.toggleDrawer}></IconLink>
<Layer
layout = {"right-75"}
closeLinkLabel = {"Back to Administration"}
open = {this.state.open}
onCloseClick = {this.toggleDrawer}
htmlAttrs = {{
"aria-labelledby": "layerLeftLabel",
"aria-describedby": "layerLeftDescription",
}}
>
<H2 id = "layerLeftLabel">Edit Post</H2>
<H2>{this.state.test}</H2> <- I want to call LayerEditPost with a variable to change "test"
</Layer>
</>
);
}
}
Ответы 1
В вашем определении React.Component<{}, {test: string, open: boolean}> в первой строке у вас есть два общих типа: второй — это тип для вашего состояния, а первый ({}) — для свойств, которые вы ищете.
Вы можете переместить определение test: string в первый тип объекта, чтобы ваше определение стало
export class LayerEditPost extends React.Component<{test: string}, {open: boolean}> { /* ... */ }
Затем вы можете получить доступ к переданному свойству, используя this.props.test:
export class LayerEditPost extends React.Component<{test: string}, {open: boolean}> {
render() {
return (
<>
{/* Other stuff ... */}
<H2>{this.props.test}</H2> <- I want to call LayerEditPost with a variable to change "test"
</>
);
}
}
Рад, что это помогло вам! Вы можете принять ответ указать, что это сработало для вас
Вам пришлось удалить test из своего состояния, потому что вы также удалили его из определения типа. Если вам это нужно (по какой-либо причине), вы можете снова добавить его во 2-е определение состояния, как и раньше.
Спасибо. Оно работает. Мне пришлось удалить «тест: привет» в моих штатах. Благодарю вас!