如何从函数中渲染 JSX 组件显示它显示在屏幕上答案

【问题标题】：How to render a JSX component from the function show that it dispaly on screen如何从函数中渲染 JSX 组件显示它显示在屏幕上
【发布时间】：2019-06-19 19:52:28
【问题描述】：

如何从函数中渲染 JSX 组件以将其显示在屏幕中。

下面是没有渲染函数 JSX 组件的代码...

export default class HomeScreen extends Component{
  state = {
      isVisible:false
  }
  modal = ()=>{
    return(<Text>Hello world</Text>);
  }
  render(){
    return(
        <View>
          <Button onPress={this.setState({isVisible:true})}>Click me</Button>
          {this.state.isVisible?this.modal:null}
        </View>
    );
  }
}

下面的代码工作正常，所以我想知道第一个错误是什么。

export default class HomeScreen extends Component{
  state = {
      isVisible:false
  }
  modal = ()=>{
    return(<Text>Hello world</Text>);
  }
  render(){
    return(
        <View>
          <Button onPress={this.setState({isVisible:true})}>Click me</Button>
          {this.state.isVisible?<Text>Hello world</Text>:null}
        </View>
    );
  }
}

所以请告诉我第一个错误是什么问题，因为没有通过从函数模式返回的 JSX 组件呈现 hello world 文本。

【问题讨论】：

标签： javascript react-native expo react-native-elements

【解决方案1】：

因为你从来没有打电话给this.modal 你必须打电话给它。 this.modal() 这是一个需要调用的函数。没问题。?

【讨论】：

【解决方案2】：

第一个问题是你没有执行模态函数。

第二次调用函数 onPress 并且不传递对函数的引用，将其包装在 arrow function onPress={() => this.setState({ isVisible: true })} 中

我建议将Modal 提取到一个新组件中，并且仅当state.isVisible 为true 时才包含它

const Modal = () => <h3>Modal</h3>;

export default class HomeScreen extends Component {
  state = {
    isVisible: false
  }

  render() {
    return (
      <View>
        <Button onPress={() => this.setState({ isVisible: true })}>Click me</Button>
        {this.state.isVisible && <Modal />}
      </View>
    );
  }
}

【讨论】：