Question

  const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}>
      <View style={[styles.itemVTextBox,
        isActive ? styles.activeItemVTextBox : null
      ]}>
        <Text style={[
          styles.item,
          isActive ? styles.activeItem : null
        ]}>{title}</Text>
      </View>
    </TouchableOpacity>
);

我看到有人在render中编写了这段代码。

我将此代码放在import和class define之间，此代码也可以使用。

我的代码是这样的：

   import React, {Component, PropTypes}   from "react";

import {
  View,
  Image,
  Text,
  ListView,
  Dimensions,
  StyleSheet,
  TouchableOpacity,
}   from 'react-native';

const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}>
      <View style={[styles.itemVTextBox,
        isActive ? styles.activeItemVTextBox : null
      ]}>
        <Text style={[
          styles.item,
          isActive ? styles.activeItem : null
        ]}>{title}</Text>
      </View>
    </TouchableOpacity>
);



 class MyOrder extends Component {

  render(){
   return (

    ...
     )
   }
  }

在我看来，render函数将被执行几次。如果我将代码放在import code和class define代码之间，代码将执行一次。

我的观点是对的吗？

我是否需要将此用户定义的代码放在单独的文件中？

在单独的文件中：

export default const ItemView = ({title, onPress, isActive}) => (
    <TouchableOpacity onPress={onPress}>
      <View style={[styles.itemVTextBox,
        isActive ? styles.activeItemVTextBox : null
      ]}>
        <Text style={[
          styles.item,
          isActive ? styles.activeItem : null
        ]}>{title}</Text>
      </View>
    </TouchableOpacity>
);

在container component：

中

从＆＃39; filePath＆＃39;导入ItemView 。

这种做法很棒吗？

Answer 1

几乎每个组件都使用的按钮使其成为可重用的组件，如果您总是为可重用组件定义单独的文件夹，这可能是一个很好的做法，下面是一个例子：

//Button.js
import React, {Component, PropTypes}   from "react";

import {
  View,
  Image,
  Text,
  ListView,
  Dimensions,
  StyleSheet,
  TouchableOpacity,
}   from 'react-native';

const Button = (props) => {
    const { title,onpress,isActive } = this.props
    return ( 
    <TouchableOpacity onPress={onPress}>
      <View style={[styles.itemVTextBox,
        isActive ? styles.activeItemVTextBox : null
      ]}>
        <Text style={[
          styles.item,
          isActive ? styles.activeItem : null
        ]}>{title}</Text>
      </View>
    </TouchableOpacity>
  );
}

export default Button

//Main component

import Button from '@.../Button.js'

class MyOrder extends Component {

  render(){
   return (
    <Button title='login' isActive={false} onPress={this.loginButtonPressed()} />
    ...
     )
   }
  }

在Button.js中，我使用了本地反应支持的jsx，看起来很干净，很好的做法就像这样实现。

干杯：）

React Native：定义用户定义组件的最佳做法是什么？

1 个答案: