本地反应：如何重构功能

Question

I have multiple functions that looks almost identical. How can I refactor my function so that I don't have write multiple functions.

This is my code:

renderImage = () => {
    var imgSource = this.state.image? imageOne : imageTwo;
    return (
      <View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
      <Image
        style={{width:46, height:46}}
        source={ imgSource }
      />
      <Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>some text</Text>
      </View>
    );
  }

I have another function that looks very similar:

renderImage2 = () => {
    var imgSource = this.state.image2? imageThree : imageFour;
    return (
      <View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
      <Image
        style={{width:46, height:46}}
//I want to change source 
        source={ imgSource }
      />
//Also I want to change text
      <Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>some other text</Text>
      </View>
    );
  }

I just want to change the Image source and the text . Can I do this?

Answer 1

Create another component that returns the render but takes 2 props you pass in (source, text)

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

class ImageWithText extends React.PureComponent {
  render() {
    const { source, text } = this.props;

    return (
      <View style={{ marginLeft: 20, marginTop: 20, width: 50, height: 67, backgroundColor: 'transparent', alignItems: 'center' }}>
        <Image style={{ width: 46, height: 46 }} source={source} />
        <Text style={{ paddingTop: 4, fontSize: 11, color: '#4a4a4a' }}>{text}</Text>
      </View>
    );
  }
}

export default ImageWithText;

and when you want to use the new component

renderImage = () => {
  var imgSource = this.state.image? imageOne : imageTwo;
  return (
    <ImageWithText source={imgSource} text="some text">
  );
}

Answer 2

You can first define a renderImage function that takes in a parameter to do decision making. Within this renderImage function, define all the possible images to load within a lookup object, such as below

renderImage = (renderImage) => {
  const lookup = {
    image_1: { src: imageOne, text: 'text_for_image_one' },
    image_2: { src: imageTwo, text: 'text_for_image_two' }
  }

  const selectedImage = lookup[renderImage] || undefined;

  if(!selectedImage) return;

  return (
      <View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
      <Image
        style={{width:46, height:46}}
        source={selectedImage.src}
      />
      <Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>{selectedImage.text}</Text>
      </View>
    );
  }

Then within your render method do below

render() {
    ...
    {this.renderImage(image_1)}
    {this.renderImage(image_2)}
    ...
  }

Answer 3

You can define simple function render like

renderImage = (imageSrc, text) => (
 <View style={{marginLeft:20, marginTop:20,width:50, height:67, backgroundColor:'transparent', alignItems:'center'}}>
      <Image
        style={{width:46, height:46}}
//I want to change source 
        source={ imageSrc }
      />
//Also I want to change text
      <Text style={{paddingTop:4, fontSize:11, color:'#4a4a4a'}}>{text}</Text>
      </View>
)

end use in your render like:

{this.renderImage(this.state.image? imageOne : imageTwo, 'some text')}