如何在没有 this 关键字的情况下在 class 中创建方法来返回组件？

Question

考虑下面给出的代码：

import Expo from 'expo';
import React from 'react';
import { StyleSheet, Text, View, Dimensions, StatusBar } from 'react-native';
import { Card, Button } from 'react-native-elements';
import Deck from './src/Deck';
import Item from './src/Item';

class App extends React.Component {
  renderCard( item ) {
    return (
      <Item key={ item.id } imageUrl={ item.uri } />
    );
  }

  renderNoMoreCards() {
    return (
      <Card title="All Done!">
        <Text style={{ marginBottom: 10 }}>
          There's no more content here!
        </Text>
        <Button
          backgroundColor="#03A9F4"
          title="Get more!"
        />
      </Card>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        <Deck
          data={DATA}
          renderCard={this.renderCard}
          renderNoMoreCards={this.renderNoMoreCards}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
});

Expo.registerRootComponent(App);

我为 JavaScript 代码检查启用了 ESLint，但出现错误 Expected this to be used by class method renderNoMoreCards(). (class-methods-use-this)。

我知道这个错误是什么意思，但是我该如何创建 return jsx 的方法？我可以将此方法创建为静态方法，但我们如何将静态方法作为 props 传递？

Answer 1

I can create this method as a static method, but how do we pass static methods as props?

通过引用它们，它们是构造函数的属性。因此，如果包含 class 的是 App，它将是 renderNoMoreCards={App.renderNoMoreCards}:

static renderNoMoreCards() {
  // ...
}

render() {
  return (
    <View style={styles.container}>
      <StatusBar hidden={true} />
      <Deck
        renderNoMoreCards={App.renderNoMoreCards}
      />
    </View>
  );
}

另一个选项是一个独立的函数（大概是在一个模块中，所以它对那个模块是私有的）：

const renderNoMoreCards = _ => 
  <Card title="All Done!">
    <Text style={{ marginBottom: 10 }}>
      There's no more content here!
    </Text>
    <Button
      backgroundColor="#03A9F4"
      title="Get more!"
    />
  </Card>
;

class App extends React.Component {
  renderCard( item ) {
    return (
      <Item key={ item.id } imageUrl={ item.uri } />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar hidden={true} />
        <Deck
          data={DATA}
          renderCard={this.renderCard}
          renderNoMoreCards={renderNoMoreCards}
        />
      </View>
    );
  }
}

如何在没有 this 关键字的情况下在 class 中创建方法来返回组件？

How to create a method inside class without this keyword for returning components?

javascript

ecmascript-6

reactjs

eslint

react-native