React Native - 直接在父组件上设置子组件的状态

Posted 2023-02-23

【中文标题】React Native - 直接在父组件上设置子组件的状态

【英文标题】：React Native - Sets the state of the child component directly on the parent component

【发布时间】：2021-03-21 10:53:51

【问题描述】：

我想问一个问题。在我遇到的情况下，我有很多内部使用状态的组件。所以我没有在父组件中声明组件的状态，因为我不希望父组件看起来有多个状态。我的问题是我可以在父组件中设置每个子组件的状态值吗？

这是我想要做的代码示例：

import React from 'react';
import Switch from 'react-native';

const Parents = () => 
  /**
    Can I set state (setIsEnabled) directly on the parent component?

    For example:
    <Child active=true onValueChange=() => setIsEnabled(!isEnabled) />
  */
  return (
    <Child active=true />
  );


const Child = (active) => 
  const [isEnabled, setIsEnabled] = React.useState(active);

  return (
    <Switch
      trackColor=
        false: 'rgba(0, 0, 0, 0.12)',
        true: 'rgba(66, 133, 244, 0.54)',
      
      thumbColor=isEnabled ? 'rgb(66, 133, 244)' : 'rgb(250, 250, 250)'
      ios_backgroundColor="rgba(0, 0, 0, 0.12)"
      onValueChange=() => setIsEnabled(!isEnabled)
      value=isEnabled
    />
  );

【参考方案1】：

我猜这就是你要找的东西

import React from 'react';
import Switch from 'react-native';

const Parents = () => 
  /**
    Can I set state (setIsEnabled) directly on the parent component?

    For example:
    <Child active=true onValueChange=() => setIsEnabled(!isEnabled) />
  */
  return (
    <Child active=true />
  );


const Child = (props) => 
  const [isEnabled, setIsEnabled] = React.useState(props.active);

  return (
    <Switch
      trackColor=
        false: 'rgba(0, 0, 0, 0.12)',
        true: 'rgba(66, 133, 244, 0.54)',
      
      thumbColor=isEnabled ? 'rgb(66, 133, 244)' : 'rgb(250, 250, 250)'
      ios_backgroundColor="rgba(0, 0, 0, 0.12)"
      onValueChange=() => setIsEnabled(!isEnabled)
      value=isEnabled
    />
  );