React Native中如何实现动态命名State？为Display组件设独立状态

一、是否支持动态命名的State？ #

React Native不推荐直接创建state_1、state_2这类独立的状态变量，但可以通过对象或数组实现类似“动态命名”的状态管理效果，这是React生态中更优雅、易维护的做法。

二、动态状态的实现方式 #

1. 使用对象存储动态状态 #

将多个动态状态聚合到一个对象中，通过自定义键名（如item_1、item_2）区分不同状态，更新时利用ES6计算属性名语法修改对应值。

示例代码：

import React, { useState } from 'react';
import { View, Button } from 'react-native';

const App = () => {
  // 初始化动态状态对象
  const [dynamicStates, setDynamicStates] = useState({
    item_1: false,
    item_2: true,
    item_3: false
  });

  // 更新指定键的状态
  const updateState = (key) => {
    setDynamicStates(prev => ({
      ...prev,
      [key]: !prev[key]
    }));
  };

  return (
    <View>
      <Button title="切换item_1" onPress={() => updateState('item_1')} />
      <Button title="切换item_2" onPress={() => updateState('item_2')} />
    </View>
  );
};

2. 使用数组存储动态状态 #

如果是有序列表类场景，用数组存储状态项，每个项包含唯一标识和对应状态值，更新时通过标识找到目标项修改。

示例代码：

import React, { useState } from 'react';
import { View, Button } from 'react-native';

const App = () => {
  const [dynamicStates, setDynamicStates] = useState([
    { id: 1, value: true },
    { id: 2, value: false },
    { id: 3, value: true }
  ]);

  const updateState = (targetId) => {
    setDynamicStates(prev => prev.map(item => 
      item.id === targetId ? { ...item, value: !item.value } : item
    ));
  };

  return (
    <View>
      {dynamicStates.map(item => (
        <Button 
          key={item.id}
          title={`切换id:${item.id}`} 
          onPress={() => updateState(item.id)} 
        />
      ))}
    </View>
  );
};

三、为每个react-native-display的Display组件设置独立状态 #

针对react-native-display的Display组件，有两种主流方案实现独立状态管理：

方案1：父组件统一管理所有Display状态（适合全局控制场景） #

将所有Display的状态聚合到父组件的对象/数组中，通过props将对应状态和更新方法传递给每个Display组件。

示例代码：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Display from 'react-native-display';

const App = () => {
  // 存储每个Display的显示状态
  const [displayStates, setDisplayStates] = useState({
    display_1: true,
    display_2: false,
    display_3: true
  });

  // 切换指定Display的显示状态
  const toggleDisplay = (displayId) => {
    setDisplayStates(prev => ({
      ...prev,
      [displayId]: !prev[displayId]
    }));
  };

  return (
    <View>
      <Display
        key="display_1"
        show={displayStates.display_1}
        onPress={() => toggleDisplay('display_1')}
      >
        <Text>第一个Display内容</Text>
      </Display>
      <Display
        key="display_2"
        show={displayStates.display_2}
        onPress={() => toggleDisplay('display_2')}
      >
        <Text>第二个Display内容</Text>
      </Display>
      <Display
        key="display_3"
        show={displayStates.display_3}
        onPress={() => toggleDisplay('display_3')}
      >
        <Text>第三个Display内容</Text>
      </Display>
    </View>
  );
};

export default App;

如果是动态生成的Display组件，可用reduce初始化状态：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Display from 'react-native-display';

const App = () => {
  // 模拟数据源
  const displayList = [
    { id: 'display_1', content: '动态项1' },
    { id: 'display_2', content: '动态项2' },
    { id: 'display_3', content: '动态项3' }
  ];

  // 初始化所有Display的状态为true
  const initialStates = displayList.reduce((acc, item) => {
    acc[item.id] = true;
    return acc;
  }, {});

  const [displayStates, setDisplayStates] = useState(initialStates);

  const toggleDisplay = (displayId) => {
    setDisplayStates(prev => ({
      ...prev,
      [displayId]: !prev[displayId]
    }));
  };

  return (
    <View>
      {displayList.map(item => (
        <Display
          key={item.id}
          show={displayStates[item.id]}
          onPress={() => toggleDisplay(item.id)}
        >
          <Text>{item.content}</Text>
        </Display>
      ))}
    </View>
  );
};

export default App;

方案2：每个Display组件自身维护独立状态（适合组件无关联场景） #

封装自定义Display组件，让它内部维护自己的显示状态，每个实例状态完全独立，无需父组件干预。

示例代码：

import React, { useState } from 'react';
import Display from 'react-native-display';

// 封装带独立状态的自定义Display组件
const SelfManagedDisplay = ({ children, initialShow = true }) => {
  const [show, setShow] = useState(initialShow);

  return (
    <Display
      show={show}
      onPress={() => setShow(!show)}
    >
      {children}
    </Display>
  );
};

// 使用方式
const App = () => {
  return (
    <View>
      <SelfManagedDisplay>
        <Text>独立状态Display1</Text>
      </SelfManagedDisplay>
      <SelfManagedDisplay initialShow={false}>
        <Text>独立状态Display2</Text>
      </SelfManagedDisplay>
    </View>
  );
};

export default App;

总结 #

React Native不需要使用state_1、state_2这类分散的动态命名变量，通过对象或数组聚合管理状态是更合理的选择。针对react-native-display的组件，根据是否需要全局控制，选择父组件统一管理或组件自身维护状态的方案即可。

内容的提问来源于stack exchange，提问作者Nine Pilots