javascript - 为什么在 React Native 中访问调用元素的 props 不起作用

Question

当按下按钮时，React Native 代码会抛出错误:

import React from 'react';
import {
  View,
  Button
} from 'react-native';

const handleClick = (event, {title}) => {
  console.log('name of button was ', title);
}

const App = () => {
  return (
    <View><Button title='Test' onPress={handleClick} /></View>
  );
};

export default App;

虽然这个 React 代码不是:

import React from 'react';
import './App.css';
import { Button } from 'semantic-ui-react';

const handleClick = (event, {title}) => {
  console.log('name of button was ', title);
}

function App() {

  return (
    <div className="App">    
      <Button title='Test' onClick={handleClick} >Test</Button>
    </div>
  );
}

export default App;

第一个错误是:“TypeError: undefined is not an object (evaluating '_ref.title')”

为什么会这样，在这种情况下 React 和 React-Native 有什么区别？为了在 React Native 中获得类似的结果，我应该如何编写相同的代码？即如何获取调用元素的属性？

React Native版本是用react-native cli版本构建的，纯项目，没有附加组件。React 版本是使用 Create React App 制作的，并添加了 Semantic Ui，但没有进一步的附加组件。

Answer 1

没有办法获取调用元素的 props，除非该元素决定将它们传递给回调。在你的例子中，它是semantic-ui-react的Button的一个功能。组件 - 请参阅其 onClick 属性的文档。

因此，您需要将您的react-native示例中的代码替换为类似这样的代码，以显式传递标题:

onClick={e => handleClick(e, {title: 'Test'})}

或者将其简化为 onClick={e => handleClick(e, 'Test')} 并删除 handleClick 中的对象解包(如果您只需要标题) .