React Native是否存在类似HTML data属性？如何获取组件数据并存入state？

当然有替代方案啦！React Native里虽然没有HTML那种原生的data-*属性，但我们完全可以通过两种灵活的方式给组件附加并获取额外数据，还能轻松把数据存入state。

方式一：事件回调直接传递数据（最推荐） #

这种方式代码直观、不容易出错，也是React Native开发中最常用的做法。你可以在触发事件（比如onPress）时，直接把需要的额外数据作为参数传给处理函数，然后在函数里更新state。

函数组件示例 #

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

const ProductList = () => {
  // 定义state存储选中的额外数据
  const [selectedProduct, setSelectedProduct] = useState(null);

  // 处理点击事件，直接接收传递的商品数据
  const handleProductPress = (product) => {
    console.log('拿到的额外数据：', product);
    // 将数据存入state
    setSelectedProduct(product);
  };

  // 模拟带额外数据的列表项
  const products = [
    { id: 1, name: '草莓', price: 20, origin: '云南' },
    { id: 2, name: '芒果', price: 12, origin: '海南' },
  ];

  return (
    <View style={{ padding: 20 }}>
      {products.map(product => (
        <TouchableOpacity
          key={product.id}
          style={{ padding: 10, borderBottomWidth: 1, marginVertical: 5 }}
          // 点击时直接把当前商品数据传给处理函数
          onPress={() => handleProductPress(product)}
        >
          <Text>{product.name}</Text>
        </TouchableOpacity>
      ))}
      {/* 展示state中的数据 */}
      {selectedProduct && (
        <View style={{ marginTop: 20 }}>
          <Text>选中的商品：</Text>
          <Text>名称：{selectedProduct.name}</Text>
          <Text>价格：{selectedProduct.price}元</Text>
          <Text>产地：{selectedProduct.origin}</Text>
        </View>
      )}
    </View>
  );
};

export default ProductList;

类组件示例 #

如果是用类组件开发，逻辑类似，只是state的更新方式不同：

import React, { Component } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

class ProductList extends Component {
  state = {
    selectedProduct: null,
  };

  handleProductPress = (product) => {
    console.log('拿到的额外数据：', product);
    // 类组件中用setState更新状态
    this.setState({ selectedProduct: product });
  };

  render() {
    const products = [
      { id: 1, name: '草莓', price: 20, origin: '云南' },
      { id: 2, name: '芒果', price: 12, origin: '海南' },
    ];

    return (
      <View style={{ padding: 20 }}>
        {products.map(product => (
          <TouchableOpacity
            key={product.id}
            style={{ padding: 10, borderBottomWidth: 1, marginVertical: 5 }}
            onPress={() => this.handleProductPress(product)}
          >
            <Text>{product.name}</Text>
          </TouchableOpacity>
        ))}
        {this.state.selectedProduct && (
          <View style={{ marginTop: 20 }}>
            <Text>选中的商品：</Text>
            <Text>名称：{this.state.selectedProduct.name}</Text>
            <Text>价格：{this.state.selectedProduct.price}元</Text>
            <Text>产地：{this.state.selectedProduct.origin}</Text>
          </View>
        )}
      </View>
    );
  }
}

export default ProductList;

方式二：自定义组件props（类似HTML的data属性） #

你也可以给组件添加自定义的props（比如data、customInfo这类名称），然后在事件回调中通过event.currentTarget.props获取这些数据。不过这种方式不如直接传参直观，偶尔会有合成事件的小坑，所以更推荐第一种方式。

示例代码 #

<TouchableOpacity
  key={product.id}
  // 添加自定义props存储额外数据
  data={product}
  onPress={(event) => {
    // 通过currentTarget.props获取自定义属性的数据
    const productData = event.currentTarget.props.data;
    setSelectedProduct(productData);
  }}
>
  <Text>{product.name}</Text>
</TouchableOpacity>

总结 #

React Native虽然没有HTML的data-*属性，但通过事件回调直接传参或者自定义props的方式，完全可以实现附加和获取额外数据的需求，并且能轻松将数据存入组件的state中。其中直接传参的方式代码更清晰，是日常开发的首选~

内容的提问来源于stack exchange，提问作者Gabriel Santos