Блог

Я хочу задать вопрос. В случае, с которым я столкнулся, у меня есть много компонентов, которые используют состояние внутри. Поэтому я не объявляю состояние компонента в родительском компоненте, потому что я не хочу, чтобы родительский компонент имел несколько состояний. Мой вопрос в том, могу ли я установить значение состояния каждого дочернего компонента в родительском компоненте?

Вот пример кода того, что я хочу сделать:

 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}
    />
  );
}
 

Я думаю, это то, что вы ищете

 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}
    />
  );
}