javascript - 如果从未传入,箭头函数如何访问参数?
问题描述
下面的 PhotosPage 组件是使用
<Route path="/settings/photos" component={PhotosPage} />
组件的签名是:
const PhotosPage = ({
uploadProfileImage,
photos,
profile,
deletePhoto,
setMainPhoto
})=>{}
但是,使用了两种类型的参数:
- 照片和个人资料是 redux 状态的一部分
- uploadProfileImage、deletePhoto 和 setMainPhoto 是导入
那是永远不会传入的。这些参数是通过react传入的,还是我不明白的javascript功能。谢谢。
import React, { useState, useEffect, Fragment } from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { firestoreConnect } from "react-redux-firebase";
import {
Segment,
Header,
Divider,
Grid,
Button
} from "semantic-ui-react";
import { toastr } from "react-redux-toastr";
import DropzoneInput from "./DropzoneInput";
import CropperInput from "./CropperInput";
import {
uploadProfileImage,
deletePhoto,
setMainPhoto
} from "../../userActions";
import UserPhotos from "./UserPhotos";
const query = ({ auth }) => {
return [
{
collection: "users",
doc: auth.uid,
subcollections: [{ collection: "photos" }],
storeAs: "photos"
}
];
};
const actions = {
uploadProfileImage,
deletePhoto
};
const mapState = state => ({
auth: state.firebase.auth,
profile: state.firebase.profile,
photos: state.firestore.ordered.photos
});
const PhotosPage = ({
uploadProfileImage,
photos,
profile,
deletePhoto,
setMainPhoto
}) => {
const [files, setFiles] = useState([]);
const [image, setImage] = useState(null);
useEffect(() => {
return () => {
files.forEach(file => URL.revokeObjectURL(file.preview));
};
}, [files]);
const handleUploadImage = async () => {
try {
await uploadProfileImage(image, files[0].name);
handleCancelCrop();
toastr.success("Success", "photo has been uploaded.");
} catch (error) {
toastr.error("Ooops", "something whent wrong");
console.log(error);
}
};
const handleCancelCrop = () => {
setFiles([]);
setImage(null);
};
const handleDeletePhoto = async photo => {
//try {
await deletePhoto(photo);
// } catch (error) {
// toastr.error("OOps", error.message);
// }
};
return (
<Segment>
<Header dividing size="large" content="Your Photos" />
<Grid>
<Grid.Row />
<Grid.Column width={4}>
<Header color="teal" sub content="Step 1 - Add Photo" />
<DropzoneInput setFiles={setFiles} />
</Grid.Column>
<Grid.Column width={1} />
<Grid.Column width={4}>
<Header sub color="teal" content="Step 2 - Resize image" />
{files.length > 0 && (
<CropperInput setImage={setImage} imagePreview={files[0].preview} />
)}
</Grid.Column>
<Grid.Column width={1} />
<Grid.Column width={4}>
<Header sub color="teal" content="Step 3 - Preview & Upload" />
{files.length > 0 && (
<>
<div
className="img-preview"
style={{
minHeight: "200px",
minWidth: "200px",
overflow: "hidden"
}}
/>
<Button.Group>
<Button
onClick={handleUploadImage}
style={{ width: "100px" }}
positive
icon="check"
/>
<Button
onClick={handleCancelCrop}
style={{ width: "100px" }}
icon="close"
/>
</Button.Group>
</>
)}
</Grid.Column>
</Grid>
<Divider />
<UserPhotos
photos={photos}
profile={profile}
deletePhoto={handleDeletePhoto}
/>
</Segment>
);
};
export default compose(
connect(
mapState,
actions
),
firestoreConnect(auth => query(auth))
)(PhotosPage);
解决方案
当我们用 'Connect' 包装一个组件时,它会连接到我们的 Redux 存储。然后我们可以给它 2 个函数 - mapStateToProps(将我们的 store 状态映射到组件 props)和 mapDispatchToProps - 我们称之为操作 - (将我们的 store 操作映射到我们的组件)。动作成为我们可以从组件调用的道具的一部分。
推荐阅读
- c# - 如何在 Qna maker 中应用全词搜索?
- javascript - 具有与 android 包名称不同的 iOS 包 ID 是否不好?
- javascript - 如何使复选框在反应中表现得像单选按钮
- multithreading - 如何在 Common Lisp 中同时运行多个阻塞循环。[将 cl-async 与线程池中的队列相结合]
- css - dl 选择器中的样式启用以设置下一个选择器的样式
- node.js - 如何开玩笑模拟nestjs导入?
- vb.net - 在VB中如何打印字符串的第一个字母
- javascript - for循环内for循环对项目进行排序
- javascript - D3:生成视图中圆的碰撞/重叠检测
- jquery - 使用 REGEX 删除部分 URL