Question

我正在尝试向我的按钮添加无状态组件。

const button = ({onButtonPress, buttonText}) => {
 return (
   <TouchableHighlight
     onPress={() => onButtonPress()}>
     <ButtonContent text={buttonText}/>
   </TouchableHighlight>
 )
};

并收到此错误：

Warning: Stateless function components cannot be given refs (See ref "childRef"  
in StatelessComponent created by TouchableHighlight). 
Attempts to access this ref will fail.

我已经阅读了这个问题，但我仍然是javascript和RN的新手并没有找到解决方案。任何帮助将不胜感激。

完整代码：

GlossaryButtonContent：

import React from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet
} from 'react-native';
import Colours from '../constants/Colours';
import {
  arrowForwardDark,
  starDarkFill
} from '../assets/icons';

type Props = {
  text: string,
  showFavButton?: boolean
}

export default ({text, showFavButton} : Props) => {
  return (
    <View style={styles.container}>
      {showFavButton &&
      <Image
        style={styles.star}
        source={starDarkFill}/>}

      <Text style={[styles.text, showFavButton && styles.favButton]}>
        {showFavButton ? 'Favourites' : text}
      </Text>

      <Image
        style={styles.image}
        source={arrowForwardDark}
        opacity={showFavButton ? .5 : 1}/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },

  favButton: {
    marginLeft: 10,
    color: Colours.darkTextHalf
  },

  text: {
    flex: 1,
    paddingTop: 5,
    marginLeft: 20,
    fontFamily: 'Bariol-Bold',
    fontSize: 24,
    color: Colours.darkText
  },

  image: {
    marginRight: 20
  },

  star: {
    marginLeft: 10
  }
});

GlossaryButton：

import React from 'react';
import {
  TouchableHighlight,
  StyleSheet
} from 'react-native';
import Colours from '../constants/Colours';
import ShadowedBox from './ShadowedBox';
import GlossaryButtonContent from './GlossaryButtonContent';

type Props = {
  buttonText: string,
  onButtonPress: Function,
  rowID: number,
  sectionID?: string,
  showFavButton?: boolean
}

export default ({buttonText, onButtonPress, rowID, sectionID, showFavButton} : Props) => {
  return (
    <ShadowedBox
      style={styles.container}
      backColor={showFavButton && Colours.yellow}>
      <TouchableHighlight
        style={styles.button}
        underlayColor={Colours.green}
        onPress={() => onButtonPress(rowID, sectionID)}>
        <GlossaryButtonContent
          text={buttonText}
          showFavButton={showFavButton}/>
      </TouchableHighlight>
    </ShadowedBox>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 60,
    marginBottom: 10,
    borderRadius: 5
  },

  button: {
    flex: 1,
    borderRadius: 5
  }
});

Answer 1

基本上，无状态组件不能有引用。

因此，在渲染树中间放置一个无状态组件会在ref链中创建一个void，这意味着你无法访问较低的组件。

所以，问题来自于尝试这样做：

let Stateless = (props) => (
  <div />
);
let Wrapper = React.createClass({
  render() {
    return <Stateless ref="stateeee" />
  }
});

TouchableHighlight needs to give a ref to its child。这会引发警告。

<强>答案：

您实际上无法使无状态组件成为TouchableHighlight

的子组件

<强>解决方案：

使用createClass或class创建TouchableHighlight的孩子，即GlossaryButtonContent。

请参阅this github issue for more info和this one

如何将无状态组件添加到可触摸组件

1 个答案: