Как вызвать метод из другого компонента класса в React.js
Итак, я должен классифицировать компоненты:
Class1: имеет кнопку щелчка
Class2: есть метод, вызывающий мой api
По сути, я хочу вызвать метод, который устанавливает и редактирует состояния внутри одного класса из другого класса. Но я продолжаю терпеть неудачу.
Пример:
Class1.js
export class Class1 extends Component {
render() {
return (
<div onClick = {must call Class2Method}></div>
)
}
}
Class2.js
export class Class2 extends Component {
Class2Method(){
Here I call my API, I set & call states, ...
}
render {
return (
<Class1 />
Here I return my API content
)
}
}
Что я пробовал:
- Я попытался использовать свой метод и вызвать и установить свои состояния в моем App.js (родитель как class2, так и class1); но затем моя консоль Class2.js говорит, что не может найти мои состояния.
- Я также пробовал: <Class1 method = {this.Class2Method} /> в моем классе 2 и <div onClick = {this.props.method}> в Class1.
Вы можете проверить это на github.com/burakozturk16/pigeon
Ответы 3
Ну вот
Class1.js
export class Class1 extends Component {
render() {
return (
<div onClick = {this.props.callApi}></div>
)
}
}
Class2.js
- Либо привяжите функцию callApi в конструкторе, либо измените ее на функцию стрелки.
Передайте метод callApi компоненту class1 в качестве опоры и получите доступ к нему в указанном выше компоненте как this.props.callApi и передайте его onClick из div.
export class Class2 extends Component { callApi = () => { Here I call my API, I set & call states, ... } render { return ( <Class1 callApi = {this.callApi} /> Here I return my API content ) } }
<Class1 callApi = {() => this.callApi ()} />
Питер, это не обязательно, но хорошо иметь это, когда мы хотим предотвратить вызов функции обработчика событий при каждом рендеринге, а также когда мы хотим передать параметры функции. Поправьте меня, если я ошибаюсь
Нет, вы правильно поняли! Но я подумал, что это будет полезно.
Боже мой, это сработало; Спасибо! Может ли кто-нибудь объяснить мне, почему он работает со стрелкой, но не с базовым методом?
Все функции обработчика событий в компоненте требуют ручной привязки или создания их в виде стрелочных функций. Поскольку привязка необходима для доступа к этому контексту внутри функции или функции стрелки, этот контекст доступен
Во-первых: подумайте об использовании Функциональные компоненты без сохранения состояния вместо компонентов с отслеживанием состояния в таких случаях, как ваш "Class1", который не использует состояния, а только свойства.
Теперь, чтобы сделать то, что вам нужно ... просто передайте свои методы как опору, примерно так:
export class Class1 extends Component {
render() {
return (
<div onClick = {this.props.getData()}>Click to Call API</div>
);
}
}
export class Class2 extends Component {
state = {
data: null,
};
callApi = () => {
// Get API data
const data = {
hello: 'world',
};
this.setState({ data });
}
render {
return (
<Class1 getData = {this.callApi} />
{JSON.stringify(this.state.data)}
)
}
}Решение Хемадри Дасари помогло; но ваш комментарий о «Рассмотрите возможность использования функциональных компонентов без сохранения состояния вместо ...» привлек мое внимание. Я собираюсь взглянуть на эту статью и попытаться понять, как это может помочь мне избежать проблем в будущем.
How do i call a method from another class component in react.js
Использование реквизита
"render prop" относится к методике совместного использования кода между компонентами React, использующими свойство, значение которого является функцией "- reactjs.org
Пример
app.js
import Button from '../../pathtoButton';
export class App extents Component {
constructor(props){
super(props)
this.state = {
name:'John'
}
}
sayHello(){
const { name } = this.message;
alert(`Hello ${name}`}
}
render(){
return (
<div>
<Button
value = "click me"
whenClicked = {this.sayHello}
</div>
);
}
}
button.js
export class Button extents Component {
constructor(props){
super(props)
this.state = {
style:{background:'red', color:'white'},
}
}
render(){
const { style } = this.state;
const { whenClicked, value} = this.props;
return (
<div>
<button style = {style} onClick = {whenClicked}>{value}</button>
</div>
);
}
}
Объяснение
В app.js мы импортировали компонент <Button/> и, используя props, передали метод из app.js «sayHello» в созданную нами опору под названием whenClicked. В button.js мы ссылались на this.props.whenClicked и передали его свойству onClick.
sayHello теперь используется совместно двумя компонентами, потому что мы передали метод как опору компоненту <Button/>.
Вам следует провести рефакторинг и удалить свою функцию, вызывающую API, и поместить ее в какой-либо другой класс. Затем импортируйте этот класс в оба компонента и вызовите метод.