Question

我是React World的新手，在阅读教程内容时，我注意到在arrow-function中使用JSX会导致重新渲染时出现一些性能问题，同时也使用bind由于JSX中的渲染性能影响，因此被禁止。

在阅读该教程之前，我的JSX就是这样

export class LabScreen2 extends Component {
  render() {
    const y = 'This is y value';

    return (
      <MyCustomButton onMyCustomButtonPressed={(x : string) => {
        alert(x+' '+y);
      }}/>
    );
  }
}

class MyCustomButton extends Component {
  render() {

    const x = 'This is x value';

    return (
      <Button title={'My Custom Button'} onPress={() => {
        this.props.onMyCustomButtonPressed(x);
      }}/>
    );
  }
}

然后，我删除了arrow-functions，

export class LabScreen2 extends Component {
  render() {
    ...

    return (
      <MyCustomButton onMyCustomButtonPressed={this.onMyCustomButtonPressed}/>
    );
  }

  onMyCustomButtonPressed = (x : string, y : string) => {
    alert(x+' '+y);
  }
}

class MyCustomButton extends Component {
  render() {

    ...

    return (
      <Button title={'My Custom Button'} onPress={this.props.onMyCustomButtonPressed}/>
    );
  }
}

但是现在我不知道如何将x和y传递给onMyCustomButtonPressed方法。

我知道可以使用bind

这样工作

<MyCustomButton onMyCustomButtonPressed={this.onMyCustomButtonPressed.bind(this,y)}/>

和

<Button title={'My Custom Button'} onPress={this.props.onMyCustomButtonPressed.bind(this,x)}/>

但是禁止在JSX中使用bind，对吗？那么，有效地在JSX中传递参数的完美方法是什么？

修改

我已经读过this answer。它告诉将参数作为prop传递，并使用inner方法返回它。听起来有点复杂。流程是正确的，但是随着尺寸的增加，将很难理解组件的工作原理。我还阅读了使用memorize提到的替代解决方案，但这也被认为是不完善的解决方案。是否有内置的完美解决方案？

如何将参数传递给JSX中的方法

0 个答案: