Использование реквизита React.js в «сочинении» Redux
Я использую react-redux-firebase и firestoreConnect, чтобы получить информацию из моей базы данных и сопоставить ее с реквизитами через их готовый редуктор. Чтобы связать его информацию с моим компонентом, я использую метод «compose» следующим образом:
export default compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect([
{
collection: 'questions',
doc: this.props.match.params.id,
subcollection: 'messages',
}
])
)(QuestionDetail);
Как видите, я пытаюсь получить доступ к определенному документу с идентификатором, который был передан компоненту в качестве реквизита от его родителя. Однако «это» не определено в контексте «составить», и поэтому я не могу использовать его для доступа к реквизитам и моему параметру.
Есть ли другой способ получить доступ к идентификатору, переданному компоненту, чтобы я мог запросить его в Firestore?
Ответы 2
После более глубокого поиска в документации я обнаружил, что вы можете передавать реквизиты функции firestoreConnect (обратите внимание, что я неправильно запрашивал подколлекции). Код заканчивается:
export default compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect((props) => [
{
collection: 'questions',
doc: props.match.params.id,
subcollections: [{ collection: 'messages' }],
}
])
)(QuestionDetail);
Он должен работать в более старой версии react-router.
Но я предполагаю, что вы используете последнюю версию React Router (v4+). Таким образом, вы должны обернуть весь компонент компонентом более высокого порядка withRouter. Он будет передавать обновленные реквизиты соответствия, местоположения и истории обернутому компоненту при каждом его рендеринге.
Сначала вам нужно импортировать файл withRouter.
import { withRouter } from "react-router";
Затем вы должны обернуть его withRouter.
export default withRouter(compose(
connect(mapStateToProps, mapDispatchToProps),
firestoreConnect((props) =>
[{
collection: 'questions',
doc: props.match.params.id,
subcollections: [{ collection: 'messages' }],
}]
))(QuestionDetail));
Это работает для меня.