Question

所以，我读过做这样的事情

<SomeButton onPress={() => { this.someFunction(args)}} />

不好，因为它为每个渲染周期创建一个新的函数实例。

但是我该如何在React-Native中传递args？

Answer 1

在许多情况下，创建一个新的内联函数就可以了，但是如果您有很多SomeButton组件，则可能值得将args传递给组件，并在其中使用它们作为参数。组件的onPress。

示例

class SomeButton extends React.Component {
  handleClick = () => {
    const { onClick, someProp } = this.props;
    onClick(someProp);
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

class App extends React.Component {
  handleClick = arg => {
    console.log(arg);
  };

  render() {
    return <SomeButton onClick={this.handleClick} someProp="foo" />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

一个人可以使用HTML data-* Attributes。

someFunction

someFunction= (event)=>{
  console.log(event.target.dataset.mykey )
}

渲染：

<Button data-mykey onPress={this.someFunction} />

Answer 3

在哪种情况下？我要说的是，这是否是您想要或需要的。通常，您可以使用属性而不是传递参数。

我猜您读过一些有关重新渲染的信息（这可能会导致性能下降）；这是本机指南中对此的描述： https://facebook.github.io/react-native/docs/direct-manipulation

如何在React-Native中将参数传递给函数而不绑定

3 个答案: