javascript - 从组件中获取内容

Question

我是原生 react 新手。

我的屏幕包含 2 个按钮，每个按钮打开相同的 <Modal>组件，但是 <View>它的内部根据点击的按钮而变化。

例如:

如果我单击第一个按钮，文本输入将显示在模式中；如果我单击第二个按钮，模式中将显示一个开关。

我制作了一个模态组件(Modal.tsx):

export default class Modal extends Component {

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

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


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

现在在我的 5 按钮屏幕 (ButtonsScreen.tsx) 中，我根据单击的按钮打开正确的模式:

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

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

这些函数可以通过 onPress={this.openTextModal} 来调用。

最后，我将模态渲染如下:

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

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

能够做类似的事情:

<Modal
    visible={this.state.modalVisible}
    animationType={'slide'}
    onRequestClose={() => this.closeModal()}>
    <View style={style.modalContainer}>
        <View style={style.innerContainer}>
            <View>
                {this.renderModal(this.state.modalType)}
            </View>
        </View>
    </View>
</Modal>
</View>

当我尝试做onPress={this.openTextModal}时，模式打开时没有任何内容。怎么了？

有人可以帮忙吗？谢谢。

Answer 1

您将 flex: 1 赋予 modelContainer 和 innerContainer，但它没有应用于 this.renderModal(this.state.modalType)，因为您已包装它与另一个没有弹性的 View 。要么删除它，要么给它一个 flex: 1，模式应该出现。我想这应该可以正常工作。

<View style={style.modalContainer}>
   <View style={style.innerContainer}>
            {this.renderModal(this.state.modalType)}
    </View>
</View>