Hacktoberfest 2026:維護者為十月標記出來的 issue,仍然開放、適合新手。 瀏覽 Hacktoberfest issue

Couldn't use match index (replace function second arg) as a key

未關閉
#18 4 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

評估

難度
5/5
預估耗時
一週以上
新手友好度
25/100
Issue 類型
功能
描述清晰度
需要釐清
活躍度
停滯
技術堆疊
javascript, react
領域
frontend

研究方向

首先閱讀本 issue 中描述的 reactStringReplace API 與 replacer callback 行為,包括目前如何使用 offset 參數。決定遞增索引或額外的 callback 引數是否能保留現有工作流程,然後記錄這項決定,並驗證重複替換會產生唯一的 React keys,且不會吞掉匹配項。

由索引模型根據 Issue 內容生成。

描述

Hello! First of all, thanks for the nicest replacer for react. )))

There's a thing. I want to use index parameter in replacer function as a key for react to be happy and render all my replaced texts. If I do two replaces at a time, say

const firstStepTexts = reactStringReplace(myText, regex1, (match, i) => <span key={`first_${i}`}>{match}</span>)
const second = reactStringReplace(firstStepTexts, regex2, (match, i) => <span key={`second_${i}`}>{match}</span>)

Then, for initial string in pattern of ${match_second_regex_1} ${match_first_regex} ${match_second_regex_2} replacer would set the same key for both second regex matches, and then react would blow up swallowing the second match span entirely.

What I did for now was embedding offset param from the new lib version, but that's not the real solution obviously.

What I could do right now is to call .reduce with running total index and not calling reactStringReplace on array, but that way I'm missing perfect lib api use-case. From the api point of lib, I could think of two possible things: 1) having second argument for replace function be running index, and not exact string match index; or 2) having another one argument with that index for replacer function.

First option would almost definitely break someone's workflow (https://xkcd.com/1172/), second one makes api clunky (arghhh, fourth parameter).

What's your opinion on this? I would be happy to help with code, but messing with api without your decision feels not a way to go.

主要語言
JavaScript
星號
666
分支
54
PR 合併指標
30 天內沒有已合併 PR

環境準備

我們還沒有檢查這個專案的環境設定檔。先看它的 README,通用步驟見我們的新手貢獻指南。

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

iansinnott/react-string-replace 的其他 Issue

查看 iansinnott/react-string-replace 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。