Question

props.order.main等是来自另一个组件的数据。是否可以将Row函数转换为类组件，同时仍然使用道具？

const Row = (props)=> {
var sub_items = [];
const number_items = props.order.num_sub_items;

  for(let i = 0; i < number_items; i++){
    sub_items.push(
      <View key = {i} style={{flexDirection: 'row', flex:1, justifyContent:'space-between' }}>
        <Text style={styles.text}>{`${props.order.sub_item_name[i]}`}</Text>
        <Text style={styles.text}>{`${props.order.sub_item_value[i]}`}</Text>
      </View>
    )
  }

  return (
    <View onPress={ () => {console.log("Row pressed")}}>
      <View style={styles.container}>
          <Text style={styles.text}>{`${props.order.main}`}</Text>
          {sub_items}
    </View>
    <ActionButton onPress={this._addItem.bind(this)}  title="Accept Order" />

  </View>
  )
}

在这里调用Row：

render() {
return (
  <View style={styles.container}>
    <ListView
      style={styles.container}
      dataSource={this.state.dataSource}
      renderRow={(data, onPress) => <Row {...data} />}
     renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
      renderSectionHeader={(sectionData) => <SectionHeader {...sectionData} />}
    />
    <ActionButton onPress={this._addItem.bind(this)} title="Accept Oldest Order" />
  </View>
);

}

谢谢！

Answer 1

应该非常简单，只需将代码移至render()，然后使用this.props代替props：

class Row extends Component {
    render() {
        var sub_items = [], props = this.props;
        const number_items = props.order.num_sub_items;

        for(let i = 0; i < number_items; i++){
            sub_items.push(
            <View key = {i} style={{flexDirection: 'row', flex:1, justifyContent:'space-between' }}>
                <Text style={styles.text}>{`${props.order.sub_item_name[i]}`}</Text>
                <Text style={styles.text}>{`${props.order.sub_item_value[i]}`}</Text>
            </View>
            )
        }

        return (
            <View onPress={ () => {console.log("Row pressed")}}>
                <View style={styles.container}>
                    <Text style={styles.text}>{`${props.order.main}`}</Text>
                    {sub_items}
                </View>
                <ActionButton onPress={this._addItem.bind(this)}  title="Accept Order" />
            </View>
        )
    }
}

Answer 2

当然 - 这是React中的一种自然模式，可以轻松实现。最大的区别是使用props引用this.props，因为从父级传递的props绑定到组件上下文。试试这个：

class Row extends React.Component {

  render() {

    const sub_items = [];
    const number_items = this.props.order.num_sub_items;

    for (let i = 0; i < number_items; i++) {
      sub_items.push(
        <View key = {i} style={{flexDirection: 'row', flex:1, justifyContent:'space-between' }}>
          <Text style={styles.text}>{`${this.props.order.sub_item_name[i]}`}</Text>
          <Text style={styles.text}>{`${this.props.order.sub_item_value[i]}`}</Text>
        </View>
      )
    }

    return (
      <View onPress={ () => {console.log("Row pressed")}}>
          <View style={styles.container}>
              <Text style={styles.text}>{`${props.order.main}`}</Text>
              {sub_items}
        </View>
        <ActionButton onPress={this._addItem.bind(this)}  title="Accept Order" />
      </View>
    );

  }
}

React Native-如何将此函数转换为类组件，但仍然使用道具？

2 个答案: