时间戳

首页 > 解决方案 > 我如何在本机反应中访问组件的内部属性（标题）

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

问题描述

我想访问 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;

标签： javascriptreactjsnative

解决方案

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

所以你有两个选择，

第一个是用来ref访问孩子在父亲处的财产。这种方法的优点是您仍然可以仅在渲染时声明标题，缺点是它复杂、反模式，并且 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存在于父母

推荐阅读