javascript - 如何在不绑定(bind) React-Native 的情况下将参数传递给函数

Question

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

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

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

但是我该如何在 React-Native 中传递参数呢？

Answer 1

在很多情况下，创建一个新的内联函数很好，但是如果你有很多 SomeButton 组件，那么将 args 作为 props 传递给组件可能是值得的，并且而是将其用作组件 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>