如何从外部函数渲染组件

Posted 2023-02-23

【中文标题】如何从外部函数渲染组件

【英文标题】：How to render a component from an external function

【发布时间】：2019-11-22 22:18:44

【问题描述】：

react-native 新手在这里。我需要从外部函数渲染组件。我知道我可以使用 state prop 来实现，但我需要这样做，因为我需要它可重用其他类等。

如下所示，我尝试将其退回，但它不起作用。当我单击按钮时，没有任何反应。 然后，我尝试一路调用onPress函数，比如()=>this.showPopup、this.showPopup和this.showPopup()（最后一个完全错了）。

import React, Component from 'react';
import View,Text, TouchableOpacity from 'react-native';

import PopupComponent from './PopupComponent/PopupComponent'

export default class myClass extends Component

showPopup = () =>
   return(<PopupComponent isVisible=true/>)
;

render()
   return(
       <View>
           <TouchableOpacity onPress=()=>this.showPopup> 
              <Text>PressButton</Text>
           </TouchableOpacity>                
      </View>
   )

如果我将组件“PopupComponent”放在渲染函数中，它可以正常工作，所以我认为组件类中没有问题。 正如您所猜想的那样，当我单击 PressButton 时，我希望它是一种可见的模式。 你们有什么想法吗？

编辑： 解决了！基于@milanika 解决方案，我在组件类中添加了以下代码：

componentWillUpdate() 
      if (this.state.isVisibleState !== this.props.isVisible) 
          this.setState(isVisibleState: this.props.isVisible);
      
   

其中 isVisibleState 是组件的 state prop，isVisible 是我从 myClass 传递的。

【问题讨论】：

编辑：显然有组件的导入

【参考方案1】：

好的两件事：

如果你想在点击后渲染它，只需为它创建一个状态/道具并通过函数 showPopup 切换它，所以 f.e

import React, Component from 'react';
import View, Text, TouchableOpacity from 'react-native';

import PopupComponent from './PopupComponent/PopupComponent'

export default class myClass extends Component 
constructor() 
  super()
  this.state =  showPopup: false 


showPopup = () => 
   this.setState(showPopup: true)
;

render()
   const  showPopup  = this.state;
   return(
       <View>
           <TouchableOpacity onPress=this.showPopup>
              showPopup && <PopupComponent isVisible=true/> 
              <Text>PressButton</Text>
           </TouchableOpacity>                
      </View>
   )

如果你的 PopupComponent 中有 isVisible 道具，你可以将 showPopup 状态作为道具传递，并在这种情况下直接将其放在渲染方法上，而 myClass 组件上没有任何逻辑，但在这种情况下，如果 this.props.isVisible 是 Popupcomponent 则返回 null假值。

【讨论】：

这是我首先想到的。这儿存在一个问题。使用您所说的两种方法，弹出窗口只显示一次！这对我来说没有任何意义。在组件类中，我得到了一个变量 isVisible，它从主类接收道具。所以我这样设置：isVisible=this.props.showPopup。然后我使用 this.state.isVisible 管理模式设置可见性，在关闭按钮中我有一个函数将 isVisible 的状态设置为 false。它工作正常，但只有一次！事实上，如果我再次点击主类中的 PressButton 什么都不会发生。

我打印了我在主类和组件类中使用的变量的console.log，情况是：myClassState: false（开头） myClassState: true（点击PressButton后） ) ComponentState: true (它显示模态) ComponentState: false (当我点击关闭按钮时) myClassState: true (当我第二次点击 PressButton ComponentState: FALSE (

我成功了！将在第一篇文章中发布解决方案。

【参考方案2】：

仅仅返回组件是没有用的，你必须在渲染函数的某个地方使用返回的代码，如下例所示

import React, Component from 'react';
import View,Text, TouchableOpacity from 'react-native';

import PopupComponent from './PopupComponent/PopupComponent'

export default class myClass extends Component

constructor() 
  super()
  this.state =  showPopup: false 


render()
   return(
                <View>
                    <TouchableOpacity onPress=() =>  this.setState( showPopup: true ) >
                        <Text>PressButton</Text>
                    </TouchableOpacity>
                    this.state.showPopup === true ? (<PopupComponent isVisible=true />) : (null)
                </View>
   )

您可以测试代码here