Question

我有一个子类来使用一些变量呈现警报。我制作myAlert.js文件并将其导入main.js

这是我的代码：

// main.js


onLoginPressed() {
// Call showAlert from child
}

render() {
  return (
    <View>
      <TouchableHighlight
         onPress = {this.onLoginPressed.bind(this)}
       />
    </View>
  )
}

现在是myAlert.js：

// myAlert.js


export default class myAlert extends React.Component {
  constructor(){
  super();
  }

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

  return (
      <View>

        <AwesomeAlert
          showProgress = {false}
          title = "AwesomeAlert"
        />

      </View>
  )
}
}

重点是，我想向孩子发送“showProgress”和“title”，这样每次调用子方法时我都可以自定义警报！

但我得到错误......

1。我的错误在哪里？

2。在这样的情况下，我应该使用redux来控制我的状态吗？

提前谢谢！

Answer 1

你无法调用孩子的功能。如何实现这一点是在父级中管理该状态。因此showAwesomeAlert应该处于main.js状态，并以prop向下传递给myAlert.js。如果你需要从孩子那里关闭它，你还需要传递一个函数来切换父母的状态。

在以下示例中，我管理父级parent中警报是否处于活动状态。我还传递了一个函数来切换它是否处于活动状态，因此我可以调用它来禁用它。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { childAlertActive: false };
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({ childAlertActive: !this.state.childAlertActive });
  }
  render() {
    return (
      <div>
        <button onClick={this.toggle}>Toggle child alert</button>
        <Child alertActive={this.state.childAlertActive} toggle={this.toggle} />
      </div>
    )
  }
}

const Child = ({ alertActive, toggle }) => (
  <SomeAlert 
    active={alertActive}
    toggle={toggle}
  />
);

在react-native中调用main类中的子方法

1 个答案: