Question

如何在这里通过编码比较或赋予数组映射条件。

这是我的状态：

  export class RightCollBar extends Component {
      constructor(props) {
        super(props);
        this.state = {
          display: false,
          data: [],
          tomodata:[],
          poyaArray:[],


        };
      }

这是我的生命周期方法：

componentWillMount() {
    this.getAbsentDet();
    this.getAbsentDetTomo() ;
    this.getCompanyHolydayLeave();
  }

今天没有此代码（这里只有雇员f_name，l_name，离开日期...）来自后端回送的雇员数据的详细信息：

getAbsentDet() {
    this.props.actions.getAbsentDetails().then(() => {
      if (!this.props.common.getAbsentDetailsPending) {
        this.setState({ data: this.props.common.absDetails.emp  });
           {console.log( 'my data array:',this.state.data )}
      }
    });
  }

这是通过后端环回获取公司的圣日详情（这里只有圣日日期和说明）；

  getCompanyHolydayLeave() {
  this.props.actions.getCompanyLeaveDetails().then(() => {
    if (!this.props.common.getCompanyLeaveDetailsPending) {

      this.setState({ poyaArray: this.props.common.companyLeave });  

    }

  });

}

此编码仅显示今天要离开的人（今天列表）。我需要如何给条件，条件是今天是圣日还是今天是星期六或星期日，那么仅显示消息“今天是圣日”或“今天是星期六” ，sunday'：这是我的数组数据（今天休假清单）地图代码。

      {this.state.data.length !== 0?<ul style={{ marginTop: 30 }}>

                    <h1 style={{fontSize: 16, }}> Today List</h1>  
                        {this.state.data.map(data =>
                            (  
                           <li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
                                <div> 
                                <span>
                                  <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} /></Badge>
                                </span>
                                <span style={{ marginLeft: 10, color: '#036cd2' }}>
                                  {data.f_name} {data.l_name}
                                </span>

                              </div>
                              </li>)

                          )} 
  <div className="check" id="rightMenu" ref="check" style={{ padding: 5 }}>         
   </div>
 </ul> : <div style={{ marginTop: 30, marginLeft: 10, fontSize: 20, borderStyle: 'solid', borderColor: 'black', textAlign: 'center', color: 'lightGray' }}>No one is absent today </div>}

Answer 1

// isHoliday function
const isHoliday = () => {
  const today = new Date()
  const dayOfWeek = today.getDay()
  return (dayOfWeek == 6 || dayOfWeek == 0) // 0 for Sunday, 6 for Saturday
}

...
{this.state.data.map(data => (
  {isHoliday() &&   
   (<li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
      <div> 
        <span>
          <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} />
          </Badge>
        </span>
        <span style={{ marginLeft: 10, color: '#036cd2' }}>
           {data.f_name} {data.l_name}
        </span>
      </div>
    </li>)}
)}

Answer 2

不确定要如何呈现消息，但是您可能正在寻找类似的内容：

render() {
    const nonWorkingDays = [
        'Holy Day',
        'Saturday',
        'Sunday'
    ]

    return (
        // Rest of your code
            <h1 style={{fontSize: 16, }}> Today List</h1>  
                {this.state.data.map(data => (
                    <li key={data .id} style={{ padding: 5, margin: 5, marginLeft: 10 }}>
                        <div> 
                            <span>
                                <Badge><Avatar style={{ color: '#ffffff', borderStyle: 'solid', borderWidth: 2 }} size="large" src={`./${data.profile_img}`} /></Badge>
                            </span>
                            <span style={{ marginLeft: 10, color: '#036cd2' }}>
                                {data.f_name} {data.l_name}
                            </span>
                            {/* Renders conditional message */}
                            {nonWorkingDays.includes(yourCurrentDayVariable) && 
                            <span>
                                Today is {yourCurrentDayVariable}
                            </span>}
                        </div>
                    </li>
                ))} 
        // Rest of your code
    )
}

显然，yourCurrentDayVariable替换为您正在处理当前日期的变量/方式。

Answer 3

在渲染今天的叶子之前，您可以检查当天是否是假期，如果是，则可以返回假日消息并停止执行其余渲染：

render() {

  if (this.isHoliday()) {
    return <div>Today is Holiday</div>
  }

  return {
    // Here you're rending Today's leaves
    // ...
  }
}

实施this.isHoliday()由您自己决定。根据您提供的详细信息，您应该执行类似的操作（伪代码）：

isHoliday() {
  const currentDay = moment()
  const holidays = this.state.poyaArray

  return holidays.find( day => moment(day).isSame(currentDay, 'day')) !== undefined
}

如何比较/ give编码的数组映射-react js

3 个答案: