Reactjs 如何在每次满足父组件中的条件时在子组件中执行函数以显示子组件？

我有一个子组件称为

Camera

，当满足以下样式的条件时，我在父组件中调用它：

<Camera showCamera = {fieldPhoto} />


 
<!-- component parent -->
  handleTakePictureAsync = ({ uri, fieldphoto }) => {
    setFieldPhoto(null);

  };

    const [fieldPhoto, setFieldPhoto] = useState (null)
    return(
        <View>
         <Camera
            showCamera = {fieldPhoto}
            handleTakePictureAsync={handleTakePictureAsync}

         />
         <Button transparent onPress = {() =>
             setFieldPhoto(true)
         </Button>)
        </View>)

我希望确保在接受摄影机使用权限之前，不会加载摄影机组件的其余代码，并且在接受权限之前，会出现请求接受权限的消息

---

您的父组件正在传递决定是否显示相机的道具

showCamera

。由于这是一个布尔值，您应该将初始值设置为

false

，而不是

null

：

const Parent = () => {
    handleTakePictureAsync = ({ uri, fieldphoto }) => {
        setFieldPhoto(false)
    }

    const [fieldPhoto, setFieldPhoto] = useState(false)
    return (
        <View>
            <Camera
                showCamera={fieldPhoto}
                handleTakePictureAsync={handleTakePictureAsync}
            />
            <Button transparent onPress={() => setFieldPhoto(true)}></Button>
        </View>
    )
}

我也不清楚为什么需要两个

showCamera

值：

const [showCamera, setShowCamera] = useState(true);
const propShowCamera = props.showCamera;

此外：

应要求对话框允许相机运行，尽可能多 直到它被接受为止

你确定这就是你想要的吗？一个无休止的弹出窗口，在用户授予相机使用权限之前请求相机许可？如果他们不想给予许可怎么办？您可能应该接受他们不想这样做，并显示一条消息“您需要向摄像头授予使用应用程序此部分的权限”

---

编写相机组件的一种方法如下：

export const Camara = ({ showCamera }) => {
    const [hasPermission, setHasPermission] = useState(false)

    useEffect(() => {
        const checkPermissionsCamera = () => {
            const status = Permissions.askAsync(Permissions.CAMERA).then(
                permission => {
                    setHasPermission(status.status === 'granted')
                }
            )
        }

        checkPermissionsCamera()
    }, [setHasPermission])

    return (
        <View>
            {showCamera && hasPermission && <div>Rest of code</div>}
        </View>
    )
}

// Parent
const Parent = () => {
    const handleTakePictureAsync = ({ uri, fieldphoto }) => {
        setIsFieldPhoto(false)
    }

    const [hasCameraPermission, setHasCameraPermission] = useState(false)
    const [isFieldPhoto, setIsFieldPhoto] = useState(false)

    useEffect(() => {
        const requestCameraPermission = () => {
            Permissions.askAsync(Permissions.CAMERA).then(
                ({ status }) => {
                    setHasCameraPermission(status === 'granted')
                }
            )
        }

        if (!hasCameraPermission && isFieldPhoto) {
            requestCameraPermission()
        }
    }, [setHasCameraPermission, hasCameraPermission, isFieldPhoto])

    return (
        <View>
            {hasCameraPermission && isFieldPhoto && (
                <Camera handleTakePictureAsync={handleTakePictureAsync} />
            )}
            <Button transparent onPress={() => setIsFieldPhoto(true)}></Button>
        </View>
    )
}

// Camera
export const Camara = ({ handleTakePictureAsync }) => {
    return (
        <View>
            <div>Normal camera code</div>
        </View>
    )
}

---

父组件正在向下传递prop

showCamera

，该属性确定是否显示摄影机。由于这是一个布尔值，您应该将初始值设置为

false

，而不是

null

：

const Parent = () => {
    handleTakePictureAsync = ({ uri, fieldphoto }) => {
        setFieldPhoto(false)
    }

    const [fieldPhoto, setFieldPhoto] = useState(false)
    return (
        <View>
            <Camera
                showCamera={fieldPhoto}
                handleTakePictureAsync={handleTakePictureAsync}
            />
            <Button transparent onPress={() => setFieldPhoto(true)}></Button>
        </View>
    )
}

我也不清楚为什么需要两个

showCamera

值：

const [showCamera, setShowCamera] = useState(true);
const propShowCamera = props.showCamera;

此外：

应要求对话框允许相机运行，尽可能多 直到它被接受为止

你确定这就是你想要的吗？一个无休止的弹出窗口，在用户授予相机使用权限之前请求相机许可？如果他们不想给予许可怎么办？您可能应该接受他们不想这样做，并显示一条消息“您需要向摄像头授予使用应用程序此部分的权限”

---

编写相机组件的一种方法如下：

export const Camara = ({ showCamera }) => {
    const [hasPermission, setHasPermission] = useState(false)

    useEffect(() => {
        const checkPermissionsCamera = () => {
            const status = Permissions.askAsync(Permissions.CAMERA).then(
                permission => {
                    setHasPermission(status.status === 'granted')
                }
            )
        }

        checkPermissionsCamera()
    }, [setHasPermission])

    return (
        <View>
            {showCamera && hasPermission && <div>Rest of code</div>}
        </View>
    )
}

// Parent
const Parent = () => {
    const handleTakePictureAsync = ({ uri, fieldphoto }) => {
        setIsFieldPhoto(false)
    }

    const [hasCameraPermission, setHasCameraPermission] = useState(false)
    const [isFieldPhoto, setIsFieldPhoto] = useState(false)

    useEffect(() => {
        const requestCameraPermission = () => {
            Permissions.askAsync(Permissions.CAMERA).then(
                ({ status }) => {
                    setHasCameraPermission(status === 'granted')
                }
            )
        }

        if (!hasCameraPermission && isFieldPhoto) {
            requestCameraPermission()
        }
    }, [setHasCameraPermission, hasCameraPermission, isFieldPhoto])

    return (
        <View>
            {hasCameraPermission && isFieldPhoto && (
                <Camera handleTakePictureAsync={handleTakePictureAsync} />
            )}
            <Button transparent onPress={() => setIsFieldPhoto(true)}></Button>
        </View>
    )
}

// Camera
export const Camara = ({ handleTakePictureAsync }) => {
    return (
        <View>
            <div>Normal camera code</div>
        </View>
    )
}

---

感谢您的回复，基本上，我希望所有以权限为主题的摄像头的验证和功能都直接从摄像头组件中进行。所需的行为是单击按钮，并在确认权限后出现弹出窗口。我希望每次点击按钮时都会发生这种情况，直到用户接受。然后看到我的回答，我说“编写相机组件的一种方法可能是这样的：”。代码包含在摄像头组件中。是的，我非常感谢您的帮助，但是useEffect只在第一次运行。然后它将不再执行，权限对话框将不再显示。我希望你能帮助我genius，我知道如果你在这方面帮助我，我会学到很多东西。谢谢你的回答，基本上我想要所有的验证和功能的相机与主题的权限，可以直接从相机组件进行。所需的行为是单击按钮，弹出窗口显示权限确认。我希望每次点击按钮时都会发生这种情况，直到用户接受。然后看到我的回答，我说“编写相机组件的一种方法可能是这样的：”。代码包含在摄像头组件中。是的，我非常感谢您的帮助，但是useEffect只在第一次运行。然后它将不再执行，权限对话框将不再显示。我希望你能帮助我，genius，我知道如果你在这方面帮助我，我将学到很多