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

如何从函数中呈现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>
    );
  }
}

导出默认类主屏幕扩展组件{
状态={
isVisible:false
}
模态=（）=>{
返回（你好世界）；
}
render（）{
返回(
点击我
{this.state.isVisible？this.modal:null}
);
}
}

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

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>
    );
  }
}

导出默认类主屏幕扩展组件{
状态={
isVisible:false
}
模态=（）=>{
返回（你好世界）；
}
render（）{
返回(
点击我
{this.state.isVisible？Hello world:null}
);
}
}

---

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

，因为您从未调用过

this.modal

你得叫它。

this.modal（）

这是一个需要调用的函数。

---

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

其次，调用函数

onPress

并且不传递对函数的引用，将其包装在

箭头函数中

onPress={（）=>this.setState（{isVisible:true}）}

我建议将

模态

提取到一个新组件中，并且仅当

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>
    );
  }
}

const model=（）=>model；
导出默认类主屏幕扩展组件{
状态={
isVisible:false
}
render（）{
返回(
this.setState（{isVisible:true}}>单击我
{this.state.isVisible&&}
);
}
}