从 class 定义之外调用 React 函数 PropType

Question

我有以下 React 组件..

import React, { Component,PropTypes } from 'react';
import RequestListItem from '../RequestListItem';
import { ScrollView,Text,View } from 'react-native';

class  RequestList extends Component {


  render(){
    return (
      <ScrollView
        onScroll={() => { console.log('onScroll!'); }}
        automaticallyAdjustContentInsets={false}
        scrollEventThrottle={200}>
        {this.props.requests.map(mapRequests)}
      </ScrollView>
    );
  }
}

RequestList.propTypes = {
  requests: PropTypes.array.isRequired,
  onRequestItemClick: PropTypes.func.isRequired
};

var mapRequests = (request, i) => {
  <RequestListItem
      id={request.id}
      title={request.title}
      onRequestItemClick={this.props.onRequestItemClick.bind(this)}
  />
};

export default RequestList;

我遇到的问题与 mapRequest 函数有关。我需要能够调用作为属性传递给此组件的 onRequestItemClick，但由于这是在 class 定义之外定义的，所以我似乎没有访问属性。我如何完成上面的代码试图做的事情？

Answer 1

您可以将回调传递给 mapRequests 方法，而不是尝试直接从道具中提取它：

class RequestList extends Component {
  constructor(props) {
      super(props);

      this.props.onRequestItemClick = this.props.onRequestItemClick.bind(this) // I'm not sure why your binding to this something you got from the props, so consider removing this line
  }

  render(){
    return (
      <ScrollView
        onScroll={() => { console.log('onScroll!'); }}
        automaticallyAdjustContentInsets={false}
        scrollEventThrottle={200}>
        {this.props.requests.map((request) => mapRequests(request, this.props.onRequestItemClick))} // the arrow function calls mapRequest, and passes the request and the callback 
      </ScrollView>
    );
  }
}

var mapRequests = (request, onRequestItemClick) => {
  <RequestListItem
      id={request.id}
      title={request.title}
      onRequestItemClick={onRequestItemClick}
  />
};

但是，如果您已经使用了匿名函数，那么您就不需要 mapRequests 函数了：

class RequestList extends Component {
  constructor(props) {
      super(props);

      this.props.onRequestItemClick = this.props.onRequestItemClick.bind(this) // I'm not sure why your binding to this something you got from the props, so consider removing this line
  }

  render(){
    return (
      <ScrollView
        onScroll={() => { console.log('onScroll!'); }}
        automaticallyAdjustContentInsets={false}
        scrollEventThrottle={200}>
        {this.props.requests.map((request) => (
            <RequestListItem
                id={request.id}
                title={request.title}
                onRequestItemClick={this.props.onRequestItemClick}        
            />
        )}
      </ScrollView>
    );
  }
}

从 class 定义之外调用 React 函数 PropType

Calling a React function PropType from outside the class definition

reactjs

react-native

redux

react-redux