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>
   ....
}

Answer 2

尝试从组件

扩展

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

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

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

export default connect(mapStateToProps, null)(CircularImage);

它会更清楚你想要完成的事情

无论如何在这种情况下你不需要mapStateToProps，因为根据状态你没有任何道具（如果你打算将imageSourceUrl作为道具传递您只需导出CircularImage而无需连接它

这可能就是你所需要的：

<强> CircularImage：

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

<强> ScreenHeaderWithImage：

export default class ScreenHeaderWithImage extends Component {
  return (
    <View style={{flex: 1, padding: 50}}>
      <View style={{marginBottom: 50}}>
        <CircularImage imageSourceUrl={require('../images/icon.png')}
      </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
}

你也没有依赖于ScreenHeaderWithImage状态的道具，所以你不需要连接它

使用它时，只需将它们传递给元素

Answer 3

我需要改变一些事情：

Pass＆＃34;道具＆＃34;作为两个功能组件的参数
更改图像propType

在ScreenHeaderWithImage组件上：

为circularImage组件添加proptype
将此prop作为返回组件的函数映射
调用函数

请参阅以下代码中的评论：

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 (props) { // 1.
  return (
    <Image source={ props.imageSourceUrl } style={{ width: 100, height: 100 }} /> 
  )
}
CircularImage.propTypes = {
  imageSourceUrl: Image.propTypes.source // 2.
}

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

CircularImage = connect(mapStateToProps1)(CircularImage);

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

function mapStateToProps2() {
  return {
    primaryHeadline: 'Timothy Max',
    secondaryHeadline: 'Kenya',
    circularImage: () => <CircularImage /> // 4.
  }
}

ScreenHeaderWithImage = connect(mapStateToProps2)(ScreenHeaderWithImage);

export default ScreenHeaderWithImage

如何使用Redux connect传递道具

3 个答案: