Question

我有一个看起来像这样的功能性React组件：

import React from 'react';

const expand = (itemId) => {
    alert('item ' + itemId + ' clicked!');
}

const Item = ({itemData: {id, title, thumbnail}}) => {
    let hasThumb = !(thumbnail === 'self' || thumbnail === 'nsfw');
    return (
        <div className="item" onClick={() => expand(id)}>
            <h3 className="item-title">{title}</h3>
            <img className="item-thumbnail" src={hasThumb ? thumbnail: 'placeholder.png'}
                alt={hasThumb ? 'Item thumbail' : 'Placeholder thumbnail'} />
        </div>
    );
};

export default Item;

它完美地工作！但是我想添加一些功能，这些功能将需要使它有状态/将其更改为基于类的Component结构。我是这样的：

import React, {Component} from 'react';

class Item extends Component {

    expand = (itemId) => {
        alert('item ' + itemId + ' clicked!');
    }

    render() {
        let hasThumb = !(this.props.itemData.thumbnail === 'self' || this.props.itemData.thumbnail === 'nsfw');
        return (
            <div className="item" onClick={() => this.expand(this.props.itemData.id)}>
                <h3 className="item-title">{this.props.itemData.title}</h3>
                <img className="item-thumbnail" src={hasThumb ? this.props.itemData.thumbnail: 'placeholder.png'}
                    alt={hasThumb ? 'Item thumbail' : 'Placeholder thumbnail'} />
            </div>
        );
    };

}

export default Item;

它可以完美编译，没有错误，但是在浏览器中，我得到TypeError: _ref is undefined，并且它调用了渲染定义的行号。我发现删除render参数中的解构语句可以消除这种情况（我可以将所有内容都称为this.props.data.[whatever]），但是与能够解构相比，这很不方便，因为我可以在功能性的React中完成此操作零件。我在这里做错了什么？还是根本不可能以这种方式进行破坏？

Answer 1

在React中，对于基于类的组件分解是在方法内部完成的。

例如：

acos

反应：TypeError：_ref未定义-从无状态转换为基于类的组件时

1 个答案: