Question

组件“this”值的子元素以及如何获取父组件？

例如：

class AComponent extends Component{
 static getThis(){
   return this;
  }
}




class MainComp extends Component{

componentDidMoud(){
  console.log(AComponent.getThis());
 }
}

用这种方式，我怎么得到它？

Answer 1

您不应该从子组件中获取父组件。如果您需要执行某些操作（即影响父组件状态），则将一个函数从父项传递给子项作为prop来执行此操作。如果您需要阅读某些内容，请将相关数据从父级传递给子级作为道具进行阅读。

Answer 2

您可以将props传递给子节点，无论它是要使用的子组件的简单原始值，还是子组件可以用来更改父组件状态的函数。这是一个简单的例子。

<强> ParentComponent.js

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      someState: true
    };

    this.someFunction = this.someFunction.bind(this);
  }

  someFunction() {
    this.setState({
      someState: false
    });
  }

  render() {
    return (
      <ChildComponent aFunc={this.someFunction} aString="someValue"/>
    );
  }
}

<强> ChildComponent.js

import React, { Component } from 'react';

class ChildComponent extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={this.props.aString}>
        <button onClick={this.props.aFunc}>
          Some text
        </button>
      </div>
    );
  }
}

组件“this”值的子代码以及如何获取父组件？

2 个答案: