Я немного запутался, когда передаю метод, определенный в родительском компоненте, который меняет представление родительского компонента на дочерний компонент (например, на кнопку в дочернем компоненте), и когда я нажмите кнопку на дочернем компоненте, выполняется ли метод из родительского компонента в родительском классе (и, следовательно, в родительском представлении) или в дочернем классе (а затем в дочернем представлении)?
Допустим, я хочу отобразить предупреждающее сообщение в родительском классе, когда кнопка в дочернем классе нажата, предупреждающее сообщение будет отображаться в родительском классе, я думаю.
Но возможно ли также передать метод, определенный в родительском элементе, дочернему элементу, а затем изменить некоторые представления в дочернем компоненте?
EDIT:
Я привожу пример для моей проблемы:
У меня есть компонент для условного рендеринга в родительском классе:
Я передаю метод onShowAlert, чтобы показать предупреждение для родительского компонента
if (this.state.alleAnzeigen.length > 0) {
anzeigenListe = (
<AnzeigenComponent
anzeigenArray={this.state.alleAnzeigen}
onClickAlert={this.onShowAlert}
onButtonFinish={this.finishDocumentHandler}
/>
)
В моем компоненте Anzeigen я передаю метод компоненту Anzeige,
во-первых, у меня было onClickalert = {() => props.onClickAlert} без (), однако в моем Parent метод не был выполнен.
const anzeigenArray = (props) => {
return props.anzeigenArray.map((anzeige,index) => (
<li className="mainList" key={anzeige.id} style={{padding: "10px"}} >
<Anzeige
anzeige={anzeige}
key={anzeige.id}
index={index}
onClickalert={() => props.onClickAlert()}
onButtonfinish={() => props.onButtonFinish(anzeige,index)}
/>
</li>
))
}
export default anzeigenArray;
мой подкомпонент "Anzeige", однако, является большим классом компонентов с состоянием:
Когда я нажимаю кнопку внутри функции рендеринга singleAnzeige, я выполняю props.onClickalert () -> метод, который я передал как props. Однако метод ничего не делает, если я не выполняю этот метод с круглыми скобками «()» в компоненте, о котором я упоминал выше, мне просто интересно, почему это так? Есть ли предел субкомпонентов, где я могу передать метод только на 2 уровня или около того, чтобы он все еще работал?
import React, {Component} from 'react';
import DubletteComponent from '../components/DubletteComponent';
import { Button, Alert } from 'reactstrap';
import { Container, Row, Col } from 'reactstrap';
class Anzeige extends Component {
constructor(props) {
super(props);
}
singleAnzeige = (props) => {
// let newText = this.htmlspecialchars_decode("71065 Sindelfingen71032 Böblingen75365 Calw72202 Nagold71083 Herrenberg71229 Leonberg");
// console.log(newText);
return (
<Row>
<Col xs={12} md={2}><b>ID:</b> {props.anzeige.id}</Col>
<Col xs={12} md={3}><b>Titel:</b> {props.anzeige.title}</Col>
<Col xs={12} md={3}><b>Institution:</b> {props.anzeige.institution}</Col>
<Col xs={12} md={2}><b>Ort:</b> {props.anzeige.ort}</Col>
<Col xs={12} md={2} className="linkButton">
<a href={props.anzeige.link} target='_blank' className="anzeigeLink">Link</a>
<button className="finishButton" onClick = {
() => {
if (window.confirm('Are you sure you wish to finish this document?')) {
props.onButtonfinish(props.anzeige,props.index);
props.onClickalert();
}
}
}>fertig</button>
</Col>
<style jsx>
{`
p, a {
}
.linkButton {
flexDirection: 'row',
justifyContent: 'flex-end',
}
.anzeigeLink {
}
.finishButton:hover {
background-color: green;
}
.finishButton {
float: right;
border: 1px solid blue;
border-radius: 10px;
background-color: dark-green;
}
@media(max-width: 576px){
.finishButton {
float: none;
margin-right: 30px;
margin-left: 20px;
}
}
`}
</style>
</Row>
);
}
render() {
return (
<div className="anzeigeCard">
{this.singleAnzeige(this.props)}
<DubletteComponent className="dublette" anzeigeID={this.props.anzeige.id} onSendDoubletten = {this.props.onClickAlert}/>
<style jsx>
{`
.anzeigeCard {
border-radius: 10px;
padding: 10px;
margin: 5px 0px 5px 0px;
border: 1px solid light-green;
width: 100%;
box-shadow: 2px 2px 2px 2px;
}
`}
</style>
</div>
)
}
}
export default Anzeige