使用状态

Question

我有这样的组件：

import React, { Component } from 'react';

class MyComponent extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      isActive: false,
    }
  }

  showMyComponent() {
    this.setState({
      isActive: true,
    });
  }

  hideMyComponent() {
    this.setState({
      isActive: false,
    });
  }

  render() {
    return (
      <div>
        <h1>Compoent Here</h1>
      </div>
    );
  }
}

export default MyComponent;

现在，在我的index.js上我添加了几个组件。

...

<Header />
<Nave />

我现在可以在这里做这样的事情：

MyComponent.showMyComponent();

就像你通常调用一个函数一样？

如果没有，这是怎么做到的？

Answer 1

您可以使用参考。在render()方法中，您可以获得参考号。 e.g。

<MyComponent ref={ref => {this.myComponent = ref}}/>

您需要创建一个字段myComponent并将其分配给它。有了它，你可以像this.myComponent.showMyComponent()

一样调用它

请参阅此处Refs and the DOM

Answer 2

使用状态

你正在考虑做出错误的反应。你不应该像这样调用组件函数。

您可以将道具传递给将使组件隐藏或显示的组件。

或将组件包装在父级中的if中。使用父状态隐藏或显示组件。

像

if (someCondition) { <MyComponent /> }

Answer 3

它是可行的，即使有些人讨厌这个选项，因为它不是官方的React方式，是真的。

您可以在组件类上定义任何公共方法（例如Typeahead上的重置方法），并通过refs调用这些公共方法（例如this.refs.myTypeahead.reset（））。在大多数情况下，使用内置的React数据流而不是强制使用ref更清楚。

但是，开箱即用，并不是禁止的，所以你可以使用参考。

class Parent extends Component {
  onSomeThing() {
    // Call some method of myChild
    this.myChild.myChildsPublicMethod()
  }

  render() {
    return <MyChild ref={ref => { this.myChild = ref; }} />
  }
}

// MyChild
// Just as demo using Pure components here.
// You could use the normal class notation.. 
const MyChild = () => <div>Ola</div>;
MyChild.someMethod = () => console.log('Ola');

更多https://zhenyong.github.io/react/docs/more-about-refs.html

React在组件内执行方法

3 个答案:

使用状态