如何从外部函数渲染组件答案

【问题标题】：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 传递的。

【问题讨论】：

编辑：显然有组件的导入

标签： typescript react-native components

【解决方案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

【讨论】：