ステートレス機能コンポーネントとクラスベース：なぜ私の小道具は変わりませんか？

Question

リンクをレンダリングするダムコンポーネントがあります。 props.filterがprops.filterTypeと同じ場合は、<a>タグの代わりに<span>がレンダリングされます。

このダムコンポーネントは、Reduxストアに接続されている親コンポーネントからfilterが渡されています。

私は親コンポーネントがfilterに変更/更新を受け取りました。コンソールにログを記録していて、親コンポーネントでそれが変更されていることを確認することができます。filter

私の愚かなコンポーネントでは、私はconsole.logging props.filterですが、これはまったく変更されません。反面、React開発ツールを使用してコンポーネントを検査し、その小道具をチェックすると、変更されます。何？！

ステートレス機能コンポーネントをクラスに変更すると機能します。コンポーネントをクラスとして持つconsole.log(props.filter)が変更されます。

import React from 'react'; 

import './styles.css'; 

/* props.filter DOES CHANGE HERE */ 
class FilterLink extends React.Component { 
    render() { 
    console.log('this.props.filter: ', this.props.filter); 
    console.log('this.props.filterType: ', this.props.filterType); 
    console.log(this.props.filter === this.props.filterType); 
    return (
     this.props.filter === this.props.filterType ? 
     <span className='active-link'>{this.props.children}</span> 
     : 
     <a id={this.props.filterType} className='link' href='' onClick={this.props.setFilter}> 
      {this.props.children} 
     </a> 
    ); 
    } 
}; 

/* props.filter DOESN'T CHANGE HERE */ 
const FilterLink = props => ({ 
    render() { 
    console.log('props.filter: ', props.filter); 
    console.log('props.filterType: ', props.filterType); 
    console.log(props.filter === props.filterType); 
    return (
     props.filter === props.filterType ? 
     <span className='active-link'>{props.children}</span> 
     : 
     <a id={props.filterType} className='link' href='' onClick={props.setFilter}> 
      {props.children} 
     </a> 
    ); 
    }, 
}); 

export default FilterLink; 

私はステートレスな機能部品の私の理解では巨大な穴があると思います。ここでは

は、両方のステートレス機能やクラスとして、コンポーネントのコードです。どんな助けやアドバイスや指示も大歓迎です。

ありがとう、

Answer 1

ステートレスコンポーネントの実装は間違っています。 renderメソッドでオブジェクトを返す代わりにレンダリングする必要があります。

const FilterLink = props => { 
    console.log('props.filter: ', props.filter); 
    console.log('props.filterType: ', props.filterType); 
    console.log(props.filter === props.filterType); 
    return (
     props.filter === props.filterType ? 
     <span className='active-link'>{props.children}</span> 
     : 
     <a id={props.filterType} className='link' href='' onClick={props.setFilter}> 
      {props.children} 
     </a> 
    ); 
};