如何使用 React 从另一个组件访问组件的类属性？答案

【问题标题】：How can I access a component's class properties from another component with React?如何使用 React 从另一个组件访问组件的类属性？
【发布时间】：2020-08-31 10:50:44
【问题描述】：

如果我创建一个类

class Foo {
  constructor(bar) {
    this.bar = bar;
  }
}

let foo = new Foo('baz');
console.log(foo.bar); // baz

我可以毫无问题地访问.bar 属性。但是，我将以下代码拆分为两个 React 组件（为清楚起见进行了修剪）：

一个Card 组件

class Card extends React.Component {
    constructor(props) {
        super(props);
        this.name = props.cardData.name;
        this.image = props.cardData.image_uris.png;
    }
}

一个Search 组件

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.fuse = null;
    this.state = {
      show: false,
      query: null,
      pool: [
        <Card cardData={{ name: 'test', image_uris: { png: 'https://i.imgur.com/or94i38.jpg' } }}></Card >,
        <Card cardData={{ name: 'test', image_uris: { png: 'https://i.imgur.com/or94i38.jpg' } }}></Card >,
        <Card cardData={{ name: 'test', image_uris: { png: 'https://i.imgur.com/or94i38.jpg' } }}></Card >,
        <Card cardData={{ name: 'test', image_uris: { png: 'https://i.imgur.com/or94i38.jpg' } }}></Card >,
      ],
      results: null
    }

    this.getResults = this.getResults.bind(this);
  }
  componentDidMount() {
    this.fuse = new Fuse(this.state.pool, {
      keys: ['name']
    })

    for (let x of this.state.pool) {
      console.log(x.name); // undefined!
    }
  }

我无法访问我之前在Card 组件上定义的属性，但我不知道为什么。我尝试创建 getter 并将属性移到构造函数之外，但无济于事。我确定我在一般的 React 或 JS 中缺少一些简单的东西，但是什么？

【问题讨论】：

JSX 语法 (<Foo ... />) 创建一个 React 元素。 React 元素实际上不是类的实例，它是如何实例化类的描述符。您可以通过 refs: reactjs.org/docs/refs-and-the-dom.html 访问实际实例（以及它的属性）。话虽如此，可能有更好的方法来实现你想要的。你需要这些属性做什么？
@FelixKling 这很有意义！用于此目的的裁判严格来说是不好的做法吗？我正在努力想一种方法来实现这个功能，否则......谢谢
@FelixKling 我正在尝试实现一个搜索组件，该组件可以搜索几个不同的卡片数组。我有一个Player 组件，其中包含Cards 数组：library、exile 和graveyard。这个想法是有一个通用的Search 组件，它可以模糊匹配上述任何数组中的Card 的名称与用户输入，然后过滤显示的Cards。如果有任何用处，完整的代码在这里：github.com/Naught0/mtg-play-test & 我必须警告你我是一个新手开发者:)
您应该只将卡片对象 ({name: ..., image_uris: ...}) 作为数据存储在您的状态中，对这些对象执行任何计算并仅在“最后”渲染它们。
好吧，与其传递Card 组件（它实际上不是对象的实例），我应该只传递数据并在之后渲染它。我想我可能明白了......

标签： javascript reactjs

【解决方案1】：

您可以使用可观察对象（面向服务）在组件之间传递数据（属性值）。这会将组件属性值分配给一个对象，然后通过订阅传递给另一个订阅了该 observable 的组件。

import { Subject } from 'rxjs';

const subject = new Subject();

export const messageService = {
    sendMessage: message => subject.next({ text: message }),
    clearMessages: () => subject.next(),
    getMessage: () => subject.asObservable()
};

然后你的组件代码：

 componentDidMount() {
        // subscribe to home component messages
        this.subscription = messageService.getMessage().subscribe(message => {
            if (message) {
                //Do stuff if you have the observable content
            } else {
                //Do other stuff is there is no observable content
            }
        });

【讨论】：

老实说，我不知道这意味着什么。我将不得不阅读 rxjs - 谢谢

【解决方案2】：

你做不到。 React 只能将数据传递给它的parent to child，但永远无法从child to parent 或node to siblings 传递数据（据我所知）。因此，您可能会使用 Redux 的方式，或者您也可以创建一个全局变量，将其命名为存储，并为该存储中的组件定义属性。稍后，您将传递的任何数据都将引用此全局变量。但我不认为这是一个好习惯。我所知道的正式实用的方法是使用 Redux。

【讨论】：

谢谢。我觉得我正在使用 React 将我的头撞到墙上。似乎没有什么能像我认为来自任何其他 OO 语言的方式那样工作......
当然，如果有帮助很高兴

【解决方案3】：

感谢大家的帮助。根据 Felix 对我的 OP 的评论，我意识到我的问题是我如何看待 React 中的状态和数据流。我传递的是组件而不是数据。

我选择通过 state 和 props 将数据传递给子组件，然后再渲染数据。

【讨论】：