Вызов дочернего метода в основном классе в react-native
У меня есть дочерний класс для отображения предупреждения с некоторыми переменными. Я делаю файл myAlert.js и импортирую его в main.js
вот мои коды:
// main.js
onLoginPressed() {
// Call showAlert from child
}
render() {
return (
<View>
<TouchableHighlight
onPress = {this.onLoginPressed.bind(this)}
/>
</View>
)
}
а теперь myAlert.js:
// myAlert.js
export default class myAlert extends React.Component {
constructor(){
super();
}
render() {
const {showAlert} = this.state;
return (
<View>
<AwesomeAlert
showProgress = {false}
title = "AwesomeAlert"
/>
</View>
)
}
}
Дело в том, что я хочу отправить дочернему элементу «showProgress» и «title», чтобы я мог получать настраиваемое оповещение каждый раз, когда вызывается дочерний метод!
но я получаю ошибки ...
1. в чем моя ошибка?
2. Должен ли я использовать redux для управления моими состояниями в подобных ситуациях?
thanks in advance!
Ответы 1
Вы не сможете вызвать функцию ребенка. Это достигается за счет управления этим состоянием в родительском элементе. Таким образом, showAwesomeAlert должен находиться в состоянии main.js и передаваться как prop на myAlert.js. Если вам нужно закрыть его от дочернего элемента, вам также необходимо передать функцию для переключения состояния в родительском.
В следующем примере я управляю состоянием того, активно ли предупреждение в родительском элементе parent. Я также передаю функцию, которая переключает, активна ли она, поэтому из всплывающего окна я могу вызвать ее, чтобы отключить.
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { childAlertActive: false };
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({ childAlertActive: !this.state.childAlertActive });
}
render() {
return (
<div>
<button onClick = {this.toggle}>Toggle child alert</button>
<Child alertActive = {this.state.childAlertActive} toggle = {this.toggle} />
</div>
)
}
}
const Child = ({ alertActive, toggle }) => (
<SomeAlert
active = {alertActive}
toggle = {toggle}
/>
);
было бы здорово, если бы вы добавили пример, пожалуйста ... (и следует ли мне использовать сокращение для этих случаев в моем приложении?)
Я бы лично не использовал redux, и тем более для очень незначительного управления состоянием, такого как формы / всплывающие окна. Не чувствуй давления, чтобы когда-либо это было нужно
В такой ситуации вам вообще не нужно использовать redux. Вы можете легко справиться с этим, используя пример @JLivengood.
этот пример не работает в react-native! не могли бы вы взглянуть еще раз?
Дайте мне знать, если вам понадобится пример кода этой концепции!