如何从函数呈现 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 你必须打电话给它。 this.modal() 这是一个需要调用的函数。没问题，它发生了。?

Answer 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>

    );

  }

}