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