Question

我有一段有效的代码，但是出现了一个linter错误，该错误指出箭头函数不应在jsx props中使用。我已经进行了研究，现在知道为什么，但是我很难对其进行重构以使其起作用。最好的方法是什么？

const renderButtons = (data, onChange) => {
  const id = data.get('id');

  const buttons = (
    <View style={ styles.buttons }>
      <Button onPress={ () => onChange(this, { name: id, value: 'alpha' }) } title='A' />
      <Button onPress={ () => onChange(this, { name: id, value: 'beta' }) } title='B' />
    </View>
  );

  return buttons;
};

Answer 1

这样的事情应该没事的。

const renderButtons = (data, onChange) => {
  const handlePress = (ele, obj) => onChange(ele, obj);
  const id = data.get('id');

  return (
    <View style={styles.buttons}>
      <Button onPress={handlePress(this, { name: id, value: 'alpha' })} title='A' />
      <Button onPress={handlePress(this, { name: id, value: 'beta' })} title='B' />
    </View>
  );
};

从jsx prop重构箭头功能

1 个答案: