如何从函数呈现 JSX 组件显示它在屏幕上显示

Question

如何从函数渲染 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>

    );

  }

}

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

Answer 1

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

Answer 2

第一个问题是你没有执行模态函数。其次，您调用该函数onPress并且不传递对函数的引用，而是将其包装在一个arrow function onPress={() => this.setState({ isVisible: true })}我会建议解压Modal到一个新的组件，包括它，只有当state.isVisible是trueconst Modal = () => <h3>Modal</h3>;export default class HomeScreen extends Component {&nbsp; state = {&nbsp; &nbsp; isVisible: false&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View>&nbsp; &nbsp; &nbsp; &nbsp; <Button onPress={() => this.setState({ isVisible: true })}>Click me</Button>&nbsp; &nbsp; &nbsp; &nbsp; {this.state.isVisible && <Modal />}&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }}