Question

我想在返回值之外访问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 docs建议反对

How to call child component function from Parent in react

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

   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在父级存在

我如何在React Native中访问组件的内部属性（标题）

1 个答案: