如何在字符串中添加条件运算符

Question

我正在使用React-JS进行列表。我正在努力使用条件运算符对数据进行排序。

• 有一个朋友列表（输入姓名和性别）。
• 数据应按性别进行排序。
• 当你点击'男性'按钮时，只有'男性'值的项目应该显示，'女性'的值应该隐藏。
• 当您点击“女性”按钮时，只会显示“女性”值的项目，并且应该隐藏“男性”的值。

我添加了条件运算符，但它没有工作。 'string'的条件运算符将在React中工作？

style={{ display : this.state.male && friend.gender == "male" ? "block" : "none" }} 

List.js

class FriendList extends Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 
      male: false, 
      female: false 
     } 
    } 

    maleButton(e) { 
     this.setState({ 
      male: !this.state.male 
     }); 
    } 

    femaleButton(e) { 
     this.setState({ 
      female: !this.state.female 
     }); 
    } 
    render() { 
     return (
      <div> 
       <button onClick={this.maleButton.bind(this)}>Male</button> 
       <button onClick={this.femaleButton.bind(this)}>Female</button> 
       <ul className={styles.friendList}> 
        { 
         this.props.friends.map((friend, index) => { 
          return (
           <FriendListItem 
            key={index} 
            id={index} 
            name={friend.name} 
            starred={friend.starred} 
            gender={friend.gender} 
            style={{ display : this.state.male && friend.gender == "male" ? "block" : "none" }} 
            {...this.props.actions} /> 
          ); 
         }) 
        } 
       </ul> 
      </div> 
     ); 
    } 
} 

FriendList.propTypes = { 
    friends: PropTypes.array.isRequired, 
    actions: PropTypes.object.isRequired 
}; 

export default FriendList; 

的数据将是这样的：

const initialState = { 
    friendsById: [{ 
     name: 'Theodore Roosevelt', 
     starred: true, 
     gender: 'male' 
    }, { 
     name: 'Abraham Lincoln', 
     starred: false, 
     gender: 'male' 
    }, { 
     name: 'George Washington', 
     starred: false, 
     gender: 'male' 
    }, { 
     name: 'Hillary Clinton', 
     starred: false, 
     gender: 'female' 
    }] 
}; 

Answer 1

可能改变你的方法一点点，filter结果第一：

this.props.friends 
    .filter(friend => 
    this.state.male && friend.gender === 'male' || 
    this.state.female && friend.gender === 'female' 
) 
    .map((friend, index) => ...) 

除非你需要在同一时间同时显示male和female性别，另一个建议我给你是去除复制本身（在状态两者布尔值）和存储单个性别值作为字符串例如。就这样，过滤方法变得更容易理解：

this.props.friends 
    .filter(friend => friend.gender === this.state.gender) 
    .map((friend, index) => ...) 

Answer 2

您可以使用.filter用于这一目的，而不是.map。对于，你可以简单地做如下：

{ 
    this.props.friends.filter((friend, index) => { 
     if((this.state.male && friend.male) || (this.state.female && friend.female)) { 
      return (
       <FriendListItem 
       key={index} 
       id={index} 
       name={friend.name} 
       starred={friend.starred} 
       gender={friend.gender} 
       style={{ display : "block" }} 
       {...this.props.actions} /> 
      ); 
     } 
    }) 

}