React Native：调用同一类中的函数组件

debugcn 发表于 Dev

用户名

我正在React Native 0.62.2应用程序中将功能组件转换为类组件。在功能组件中定义了一些功能组件。转换为类组件后，定义的那些功能组件会出错。错误是：

[ReferenceError: Can't find variable: GridImage]

这是代码示例：

export default DisplayImg extends React.Component {

   GridImage = () => {
     //component detail
   };

   render() {
     return (
     <GridImage .../>
     );
   }

}

我可能可以转换GridImage为函数并在同一类中调用它。但是，有没有一种方法可以调用在同一类中定义的函数组件？

六月

您需要使用 this

render() {
 return (
  <this.GridImage .../>
 );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  GridImage = () => <p>GridImage</p>;
  render() {
    return <React.Fragment>
      <this.GridImage />
    </React.Fragment>;
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>

或只是在渲染器中调用该函数

render() {
 return (
   // this's better than the above approach
  {this.GridImage()}
 );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">

class App extends React.Component {
  GridImage = () => <p>GridImage</p>;
  render() {
    return <React.Fragment>
      {this.GridImage()}
    </React.Fragment>;
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);
</script>