ReactJSのクラス名フィールドのメソッドの戻り値にアクセスする方法は？

Question

I成分

function getSortByClass(sortByOption){ 
    if (this.state.sortBy === sortByOption) { 
     return 'active'; 
    } 
    else { 
     return ''; 
    } 
    } 

外機能を以下ている私は、次の機能を復帰される成分を有します。

return Object.keys(sortByOptions).map(sortByOption => { 
    let sortByOptionValue = sortByOptions[sortByOption]; 

    return <li className={} key={sortByOptionValue} 
onClick={ handleSortByChange.bind(this, sortByOptionValue)}> {sortByOption} </li>; 
    }); 

私は<li>タグのクラス名の値にgetSortByClass関数の戻り値にアクセスする方法を知りたいです。

ここに完全なコンポーネントコードがあります。

import React from 'react'; 
import './SearchBar.css'; 

const sortByOptions = { 
    'Best Match': 'best_match', 
    'Highest Rated': 'rating', 
    'Most Reviewed': 'review_count' 
} 
    function getSortByClass(sortByOption){ 
    if (this.state.sortBy === sortByOption) { 
     return 'active'; 
    } 
    else { 
     return ''; 
    } 
    } 

export class SearchBar extends React.Component{ 
    renderSortByOptions(){ 
     const that = this; 

    function handleSortByChange(sortByOption){ 
     this.setState({ sortBy: sortByOption}); 
     } 

     return Object.keys(sortByOptions).map(sortByOption => { 
     let sortByOptionValue = sortByOptions[sortByOption]; 
     return <li className={} key={sortByOptionValue} onClick={ handleSortByChange.bind(this, sortByOptionValue)}> {sortByOption} </li>; 
     }); 
    } 


    constructor(props) { 
     super(props); 
     this.state = { 
      term: '', 
      location: '', 
      sortBy: 'best_match', 
     }; 
    } 
    render(){ 
     return (
     <div className="SearchBar"> 
     <div className="SearchBar-sort-options"> 
      <ul> 
      {this.renderSortByOptions()} 
      </ul> 
     </div> 
     <div className="SearchBar-fields"> 
      <input placeholder="Search Businesses" /> 
      <input placeholder="Where?" /> 
     </div> 
     <div className="SearchBar-submit"> 
      <a>Lets Go</a> 
     </div> 
     </div> 
    ); 
    } 
    } 

    export default SearchBar; 

Answer 1

あなたがしようとしていることが可能かどうかは分かりませんが、それは良い考えではありません。関数にパラメータとして使用している状態の部分を渡すだけです。その後、

function getSortByClass(sortBy, sortByOption){ 
    if (sortBy === sortByOption) { 
     return 'active'; 
    } 
    else { 
     return ''; 
    } 
    } 

機能が@mersocarlinが言ったように、単にコンポーネントにそれを置く範囲外とされていない場合

return <li className={} key={sortByOptionValue} onClick={ handleSortByChange(this.state.sortBy, sortByOptionValue)}> {sortByOption} </li>; 

にお電話を変更します。 SETSTATEを使用して

編集：

getSortByClass(sortByOption){ 
    if (this.state.sortBy === sortByOption) { 
     this.setState({styleClass: 'active' }); 
    } 
    else { 
     this.setState({styleClass: '' }); 
    } 
    }