使用同位素布局按日期排序

Question

我找不到任何关于如何在我的 Next.js 项目中使用同位素布局进行日期排序的文档。这是我的进展。日期显然是排序的，但它会按字母顺序排序。我需要知道如何写这个 date: function ($elem) { return Date.parse($elem.find('.date').text()); }

const KeyOutcomes = (props) => {
  const isotope = useRef()
  const [sortKey, setSortKey] = useState('date')

  // initialize an Isotope object with configs
  useEffect(() => {
    isotope.current = new Isotope('.news', {
      itemSelector: '.newsInner',
      layoutMode: 'fitRows',
      getSortData: {
        header: '.header',
        date: '.date',
      },
    })
    // cleanup
    return () => isotope.current.destroy()
  }, [])

  // handling sort key change
  useEffect(() => {
    isotope.current.arrange({ sortBy: `${sortKey}` })
  }, [sortKey])

  const handleSortKeyChange = (key) => () => setSortKey(key)
  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <div className="sortAndFilter">
            <ul className="sortFilter">
              <li>Sort By:</li>
              <li
                onClick={handleSortKeyChange('header')}
              >
                Header
              </li>
              <li
                onClick={handleSortKeyChange('date')}
              >
                Date
              </li>
            </ul>
          </div>
          <div className="news">
            <div className="newsInner vege">
              <div className="newsText two">
                <h3 className="header">V News Header</h3>
                <p className="date">02/05/2020</p>
              </div>
            </div>
            <div className="newsInner one">
              <div className="newsText">
                <h3 className="header">D News Header</h3>
                <p className="date">26/05/2020</p>
              </div>
            </div>
            <div className="newsInner one">
              <div className="newsText">
                <h3 className="header">G News Header</h3>
                <p className="date">10/12/2021</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Answer 1

您可以传递 function 作为 getSortData 中的 date 值。这允许我们检索日期值并相应地解析以进行排序。

isotope.current = new Isotope('.news', {
    itemSelector: '.newsInner',
    layoutMode: 'fitRows',
    getSortData: {
        header: '.header',
        date: function (newsInnerElem) {
            const dateElem = newsInnerElem.querySelector('.date')
            // Convert date to MM/DD/YYYY so it can be properly parsed
            const [day, month, year] = dateElem.textContent.split('/')
            return Date.parse(`${month}/${day}/${year}`)
        }
    }
})

使用同位素布局按日期排序

Sort by date with isotope-layout

javascript

next.js

jquery-isotope