Question

我是新来的本地人。

我的屏幕包含5个按钮，每个按钮打开相同的<Modal>，但其中的<View>会根据点击的按钮而改变。

如果单击第一个按钮，文本输入将显示在模态中。

如果我点击第二个按钮，开关将显示在模态中。

我制作了一个模态组件（Modal.tsx）：

export default class Modal extends Component {

  constructor(props) {
    super(props)
  }

  public render() {
    return (
      <View style={style.modal} >
        {this.props.children}
      <View>
    )
  };
}

// Specific modal implementation with TextInput
const ModalWithTextInput = props => (
  <Modal>
    <TextInput
      value={props.someValue}
    />
  <Modal>
)


// Specific modal implementation with Switch
const ModalWithSwitch = props => (
  <Modal>
    <Switch
      value={props.someValue}
    />
  <Modal>
)

现在在我的5键屏幕（ButtonsScreen.tsx）中，我根据点击的按钮打开正确的模态：

openTextModal = () => {
   this.setState({ modalType: 'text' });
}

openSwitchModal = () => {
   this.setState({ modalType: 'switch' });
}

使用例如onPress={this.openTextModal}

调用这些函数

最后，我渲染模态，以便能够执行以下操作：

<View>
   {this.renderModal(modalType)}
</View>

这样：

renderModal = (type) => {
    if (type === 'text') {
        return <ModalWithTextInput someValue="default text" />
    }

    if (type === 'switch') {
        return <ModalWithSwitch someValue={false}/>
    }
}

当我尝试使用onPress = {this.openTextModal}打开模态时，没有任何反应（没有错误，没有警告）。

有人可以帮忙吗？感谢。

Answer 1

您需要在显示模态的组件的render方法中从状态中提取modalType。

单击按钮，仅设置状态，您需要处理组件中的状态以触发刷新。刷新渲染方法将渲染模态更改;反应101。

render() {
  const { modalType } = this.state;

  return (  
    <View>
      {this.renderModal(modalType)}
    </View>
  );
}

基于这个事实，这几乎是我的另一个问题的代码。我强烈建议你退后一步，学习React的基本内容，而不仅仅是让人们把你不理解的解决方案拼凑起来。否则结果是你学得很少并且有你不理解的代码。

为什么我的模态没有显示？

1 个答案: