Question

我正在使用react-native，并尝试使用presenter，容器模式。而且我面临的问题是如何将所有状态从Container传递到Presenter。

例如。

// PhoneLoginContainer.js

class PhoneLoginContainer extends Component {
  state = {
    phoneNumber: {
      value: "",
      valid: null
    },
    name: {
      value: "",
      valid: null
    },
    loading: false
  };

  render() {
    const { phoneNumber, name, loading } = this.state;

    return (
      <PhoneLoginPresenter
        phoneNumber={phoneNumber}
        name={name}
        loading={loading}
        onInputChange={this.onInputChange}
      />
    );
  }
}

// PhoneLoginPresenter.js

const PhoneLoginPresenter = (
  name,
  phoneNumber,
  loading,
  onInputChange
) => {
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.title}>Enter your mobile number</Text>
      </View>
      <Input
        name="Phone Number"
        placeholder="01082970157"
        onChangeText={value => onInputChange("phoneNumber", value)}
        keyboardType="phone-pad"
        value={phoneNumber.value}
        maxLength={11}
      />
    </View>
  );
};

如果我这样做，将无法访问name.value, name.valid或phoneNumber.value, phoneNumber.valid。

是否可以将所有嵌套状态传递给Presenter？

Answer 1

您可以在组件的props中解构状态：

  <PhoneLoginPresenter
    ...this.state
    onInputChange={this.onInputChange}
  />

Answer 2

要从父组件传递所有state，只需执行以下操作：

// PhoneLoginContainer.js

class PhoneLoginContainer extends Component {
  state = {
    phoneNumber: {
      value: "",
      valid: null
    },
    name: {
      value: "",
      valid: null
    },
    loading: false
  };

  render() {
    return (
      <PhoneLoginPresenter
        ...this.state
        onInputChange={this.onInputChange}
      />
    );
  }
}

这样，您将破坏当前状态，并将其所有项目作为<PhoneLogicPresenter />的道具传递（如果您想进一步了解destructuring，请转到here）。

在反应中将所有状态从Container传递给Presenter

2 个答案: