我如何在本机反应中访问组件的内部属性（标题）

Question

我想访问 return 之外的 title 属性，以便我可以将它传递给其他人，但我不知道如何访问组件的属性这里是我的自定义组件

import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
export const ClickableIcon = (props) => {
    console.warn('hi')
    return (
        <TouchableOpacity onPress={props.onPress} >
            <Text>{props.title}</Text>
        </TouchableOpacity>
    )
}

在这里，我正在使用该组件

import React from 'react';
import { View, Text, StyleSheet, } from 'react-native';
const Divisions = (props) => {
console.warn(title) **I want to access particular title of key 1** 
  return (
    <View style={styles.block}>

      <ClickableIcon  onPress={props.onPress} title='ac service' key='1'
       />
      <ClickableIcon onPress={props.onPress}  title='babysitter' key='2' 
       />

    </View>
  )
}
export default Divisions;

Answer 1

您想在他的父亲中访问子组件的title属性，而您声明title值的第一刻是在子组件的渲染中。

所以你有两个选择，

第一种是使用ref在父亲处访问孩子的财产。 这种方法的优点是您仍然可以仅在渲染时声明标题，缺点是它复杂、反模式，并且 React 文档建议不要

如何在反应中从父级调用子组件 function

第二个选项是在渲染之前声明titles ，并为此数组渲染 map

---

   const Divisions = (props) => {
      const titles = [ { t: 'ac service', k: 1 }, { t: 'babysitter', k: '2' } ]
      return (
        <View style={styles.block}>
         { titels.map(title => 
            <ClickableIcon onPress={props.onPress} title={title.t} key={title.k} />
          )
         }
        </View>
        )
       }

---

现在titels存在于父级