reactjs - 如何使用 Redux connect 传递 props

Question

我尝试使用 redux 属性传递字符串和子组件，如下所示。我收到错误“TypeError:无法读取未定义的属性circularImage”

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { View, Text, Image } from 'react-native'

// CircularImage.js
function CircularImage () {
  return (
    <Image source={this.props.imageSourceUrl} style={{width: 100, height: 100}} /> // Rounded Img
  )
}
CircularImage.propTypes = {
  imageSourceUrl: PropTypes.string.isRequired
}

function mapStateToProps1(state, ownProps) {
  return {
    imageSourceUrl: require('../images/icon.png')
  }
}

CircularImage = connect(mapStateToProps1)(CircularImage);

// ScreenHeaderWithImage.js
function ScreenHeaderWithImage () {
  return (
    <View style={{flex: 1, padding: 50}}>
      <View style={{marginBottom: 50}}>
        {this.props.circularImage}
      </View>
      <Text style={{ fontSize: 20 }}>{this.props.primaryHeadline}</Text>
      <Text style={{ fontSize: 10 }}>{this.props.secondaryHeadline}</Text>
    </View>
  )
}
ScreenHeaderWithImage.propTypes = {
  primaryHeadline: PropTypes.string.isRequired,
  secondaryHeadline: PropTypes.string, // Optional
}

function mapStateToProps2(state, ownProps) {
  return {
    primaryHeadline: 'Timothy Max',
    secondaryHeadline: 'Kenya',
    circularImage: CircularImage
  }
}

ScreenHeaderWithImage = connect(mapStateToProps2)(ScreenHeaderWithImage);

export default ScreenHeaderWithImage

Answer 1

当使用函数组件时，函数应该接收 props 作为参数。像这样

function ScreenHeaderWithImage (props) {
   ...
   <View style={{marginBottom: 50}}>
    {props.circularImage}
   </View>
   ....
}