React-Native ListView renderRow发出传递道具。正确的方式或错误的方式 [英] React-Native ListView renderRow issues passing props. The right way or the wrong way

问题描述

在React-Native中使用ListView，我看到的是不一样的，将道具移动到列表项，

Working with a ListView in React-Native, I have seen that is not the same, moving props to the list item,

1. 仅使用引用将函数作为props传递，并调用子组件中的参数，或者

1. Pass functions as props only with the reference, and invoke the parameters in the child component, or

将函数作为带有参数的props传递，并调用孩子没有参数的功能

Pass functions as props with parameters defined, and invoke the function with no parameters in the child

所有解决方案都不起作用。

None of the solutions works.

调用的函数是Redux的Actions创建者，并被调度。这是一个Redux或React-Native（也许是ReactJS）的问题

The function invoked are Actions creators of Redux, and dispatched. Is this a issue of Redux or React-Native (maybe ReactJS)

这是一个片段，市场为//错误代码行无效后跟着好的

This is a snippet, market as //ERROR the code lines that does'nt work followed by the good ones

class App extends Component {

  // On props 
  // data: an Array
  // doThis: an action creator of Redux
  // doThat: idem

  constructor(){
    super();
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  }

  render () {
    const dataSource = this.ds.cloneWithRows(this.props.data);

    return (
      <View>
        <ListView style={{flex:1}}
            dataSource={dataSource}
            renderRow={(rowData, sectionID, rowID) =>
              <Item  rowData={rowData}
              //ERROR
              //onPress={this.props.doThis}
              //onLongPress={this..props.doThat}
              //RIGHT NO ERROR TOO
              onPress={() => this.props.doThis(rowData)}
              onLongPress={() => this.props.doThat(rowData)}
              />
            }
          />
      </View>
    )
  }
}

class Item extends Component {
  render() {
    return (
      <View>
        <TouchableHighlight
          //ERROR 
          //onPress={() => { this.props.onPress( this.props.rowData ) }}
          //onLongPress={() => { this.props.onLongPress( this.props.rowData ) }}
          //WRONG TOO
          onPress={this.props.onPress}
          onLongPress={this.props.onLongPress}
          >
          <Text>
            {rowData}
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

这里有一个有这个问题的仓库 https://github.com/srlopez/test
提前致谢

There is a repo with this problem here https://github.com/srlopez/test Thanks in advance

推荐答案

如果你的高级回调接受一个参数，你需要确保你的匿名函数也接受一个参数（注意：使用箭头语法创建匿名函数）自动将我们的函数绑定到当前上下文中 this 的值。我认为您目睹了一系列问题，其中您的回调被绑定到不正确的上下文（窗口），或者您不接受传递的参数：

If your high-level callbacks accept a parameter, you need to make sure your anonymous functions accept a parameter as well (Note: creating anonymous functions using the arrow syntax automatically binds our function to the value of this in the current context). I think you witnessed a combination of issues where either your callbacks were bound to the incorrect context (the window) or you weren't accepting the passed arguments:

class App extends Component {

  // On props 
  // data: an Array
  // doThis: an action creator of Redux
  // doThat: idem

  constructor(){
    super();
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  }

  render () {
    const dataSource = this.ds.cloneWithRows(this.props.data);

    return (
      <View>
        <ListView style={{flex:1}}
            dataSource={dataSource}
            renderRow={(rowData, sectionID, rowID) => 
              <Item rowData={rowData}
                  onPress={(data) => this.props.doThis(data)}
                  onLongPress={(data) => this.props.doThat(data)} />
            }/>
      </View>
    )
  }
}

class Item extends Component {
  render() {
    return (
      <View>
        <TouchableHighlight
          onPress={() => this.props.onPress(this.rowData)}
          onLongPress={() => this.props.onLongPress(this.rowData)}>
          <Text>
            {rowData}
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

这篇关于React-Native ListView renderRow发出传递道具。正确的方式或错误的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！