Как получить ссылку из дочернего компонента Mobiscroll в родительский
Я пытаюсь передать состояние ребенка в родительский. После перемещения состояния и метода Child в родительский я получил следующее:
export default class Parent extends React.Component {
constructor() {
super();
this.state = { mpc_steps: { price: 0, credits: 0, text: "MPC Credits" } }
}
setMPCSteps = () => {
let step = this.refs.mpc_slider.instance.getVal(); // Will fail
this.setState({
mpc_steps: {
price: step * 200,
credits: step,
text: "MPC Credits"
}
});
};
render() {
return(
<div>
<Child getCredits = {this.setMPCSteps} getParentState = {this.state.mpc_steps}/>
)
}
}
Дочерний компонент:
export default class Child extends React.Component {
render() {
return (
<Fragment>
<mobiscroll.Slider
ref = "mpc_slider"
value = {this.props.getParentState}
onChange = {this.props.getCredits}
>
Buy Credits @ $2/Credit
</mobiscroll.Slider>
</Fragment>
)
}
}
Мне нужно как-то вызвать значение ссылки ребенка от родителя. Проблема в том, что ссылка mobiscroll не определяется родительским элементом. Есть простой способ сделать это? Любые подсказки приветствуются.
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов
Проще говоря, компонент - это фабрика для создания элементов.
1
0
90
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете использовать React.forwardRefapi:
Дочерний компонент:
class Child extends React.Component {
render() {
return (
<Fragment>
<mobiscroll.Slider
ref = {this.props.innerRef}
value = {this.props.getParentState}
onChange = {this.props.getCredits}
>
Buy Credits @ $2/Credit
</mobiscroll.Slider>
</Fragment>
)
}
}
export default React.forwardRef((props, ref) => <Child innerRef = {ref} {...props}/>);И используйте это так:
<Child ref = "mpc_slider" />
Блестяще. Спасибо!