Javascript 如何在onPress调用中打开组件？

基本上，我的应用程序中有一个屏幕，其中有一个按钮，这个按钮应该打开一个模式，它也是同一个屏幕js文件中的一个自制组件

我正在设置屏幕中可见的状态，该按钮有一个onPress处理程序，用于切换可见状态（false/true）

我不知道单击按钮时如何显示我自己的modalComponent

btw使用react本机模式

自己的模态组件：

class PhasenModal extends Component {
  render() {
    return (
      <View>
        <Modal isVisible={this.props.visible}>
          <View style={{ flex: 1 }}>
            <Text>I am a modal</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

class PhasenModal扩展组件{
render（）{
返回(
我是情态动词
);
}
}

在我的屏幕视图中：

<Button
  buttonStyle={styles.phaseButton}
  title="Choose"
  onPress={() => this.phasenModalHandler()}
/>

this.phasenModalHandler（）}
/>

onPress fnct：

phasenModalHandler() {
  this.setState({ visible: !this.state.visible });
  if (this.state.visible) {
    return <PhasenModal visible={this.state.visible} />;
  } else {
    return;
  }
}

phasenModalHandler（）{
this.setState（{visible:！this.state.visible}）；
if（this.state.visible）{
返回；
}否则{
返回；
}
}

我希望按钮显示模态，但它不显示任何内容， 通过将状态从false切换为true，可以正确切换状态

我猜我的onPress fctn是错误的，因为我不知道如何渲染组件

class ScreenView extends Component {
  state = {
    visible: false
  };

  phasenModalHandler = () => {
    this.setState(({ visible }) => ({ visible: !visible }));
  };

  render() {
    return (
      <>
        <Button
          buttonStyle={styles.phaseButton}
          title="Choose"
          onPress={this.phasenModalHandler}
        />
        {this.state.visible && <PhasenModal />}
      </>
    );
  }
}

class PhasenModal extends Component {
  render() {
    return (
      <View>
        <Modal isVisible>
          <View style={{ flex: 1 }}>
            <Text>I am a modal</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

---

提前感谢。

您从事件处理程序返回的内容将不会被呈现，因此您可以改为使用状态中的

visible

值有条件地呈现

phasenmodel

组件

class ScreenView extends Component {
  state = {
    visible: false
  };

  phasenModalHandler = () => {
    this.setState(({ visible }) => ({ visible: !visible }));
  };

  render() {
    return (
      <>
        <Button
          buttonStyle={styles.phaseButton}
          title="Choose"
          onPress={this.phasenModalHandler}
        />
        {this.state.visible && <PhasenModal />}
      </>
    );
  }
}

class PhasenModal extends Component {
  render() {
    return (
      <View>
        <Modal isVisible>
          <View style={{ flex: 1 }}>
            <Text>I am a modal</Text>
          </View>
        </Modal>
      </View>
    );
  }
}

类屏幕视图扩展组件{
状态={
可见：假
};
phasenModalHandler=（）=>{
this.setState（（{visible}）=>（{visible:！visible}））；
};
render（）{
返回(
{this.state.visible&&}
);
}
}
类PhasenModal扩展组件{
render（）{
返回(
我是情态动词
);
}
}

好的，谢谢，至少我现在看到了一个模式，但问题很少。1.它现在总是在所有屏幕上显示，因为isVisible的值设置为true，但它需要由我的屏幕控制，就像我在上面所说的。props.visible。2.我在模式中放置了一个按钮来关闭它，你知道fnctn关闭它的样子吗？因为我不能在模式组件中设置状态，因为我的状态是在屏幕中管理的。@是的，我很高兴您可以将

phasenModalHandler

方法作为一个名为

toggle

的道具传递给

PhasenModal

组件，并在单击“关闭”按钮时调用该组件。确定似乎对我有效，显然我需要做一些工作调整，但感谢您的解决方案。您是否介意向我解释一下为什么我们需要/>{this.state.visible&&}@yesIamFaded中的：“”太好了！不客气。一个组件只需要一个顶级元素，

称为A，不会在DOM中呈现任何内容。例如，如果您愿意，您可以使用顶级

。