カスタムDOMノードに/ setAttributeクラスを追加し、カスタムbbcodeのようなテキストエディタにテキストを書きたいとします。 の<item></item>が空でない場合は、一致する値を見つけるためにitems配列をフィルタリングしています。 itemノードの数に制限はありません。 iはitem名前アイコンをクリックするたびに（すなわち、2、5、10）テキストプレビューコンポーネントのカスタムDOMノードの属性を設定する
はだから、[item][/item]よう<item></item>としてプレビューコンポーネントでTEXTAREAに示します。アイテムが書かれたら、[item]id123[/item] DOM <item>itemName123</item>にあると言うことができます。さて、私がやっていることはDOMを操作している
外と反応：
const setAttributes = (el, item) =>{
el.dataset.img = item.img;
el.setAttribute('class', _.toLower(item.color))
};
const updateItems =() =>{
if(document.querySelectorAll('item')) {
document.querySelectorAll('item').forEach(el => items.find(item => {
if(_.toLower(el.innerHTML) === _.toLower(item.id))
setAttributes(el, item)
}));
}
}
私はテキストを変更するたびに問題があり、それが設定されている属性を削除して、コンポーネントを再描画します。
私はES6からいくつかの正規表現醤油とすべてのことgodsent機能filter、mapでincludesを通過、それはそれを分割することによってdangerouslySetInnerHTMLマークアップに行く前に、テキスト/文字列を操作しようとしたが、それだけで臭いです。
私は欠けているものがなければならないと私は信じています。
編集：私はまた、setAttributes() && updateItems()をクラス外に置こうとしました。
編集＃2：私は[item][/item]から変えてるの方法は、正規表現text.replace(/\[item]/g, <item>).replace(/\[\/item]/g, </item>)経由なので、おそらく私は、それぞれの再レンダリングの正規表現で何か代わりのsetAtrributeを行うことができ、もしそうなら、私はその
new RegExp(/\[item]/+ _.toLower(item.name)+ /\[\/item]/, 'g');
text.replace(<item class="${item.quality}">${_.toLower(item.name)}</item>)
上
以降これまでのところありません成功。
アドバイスとアドバイスをありがとうございます！