React: "rowspan"์†์„ฑ์ด DOM์— ๋‚˜ํƒ€๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2013๋…„ 08์›” 14์ผ  ยท  9์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

<th rowspan="2"></th> ๋Š” DOM์—์„œ rowspan ๋ฅผ ์„ค์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊ตฌ์„ฑ ์š”์†Œ:

render: function() {
  return (
    <thead>
      <tr>
        {this.props.columns.map(this.renderColumnLabel)}
        <th rowspan="2"></th>
      </tr>
      <tr>
        {this.props.columns.map(this.renderColumnControl)}
      </tr>
    </thead>
  );
}

์‚ฐ์ถœ:

...
<th data-reactid=".r[5je1f].[0].[1].[1].[6].[0].[0].[1].[0].[0].[0].[1]"></th>
...

์ด๊ฒƒ์ด ๋‚˜์˜ ์ฒซ ๋ฒˆ์งธ PR์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? :)

starter Bug

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

rowSpan ํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. el.rowSpan = 2; ์ˆ˜ํ–‰ํ•˜๋Š” DOM ์ธํ„ฐํŽ˜์ด์Šค์™€์˜ ์ผ๊ด€์„ฑ์„ ์œ„ํ•ด ์†์„ฑ์— camelcase ๋ฒ„์ „์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์ด๊ฒƒ์— ๋Œ€ํ•ด ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž˜๋ชป๋œ ์ผ€์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ฒฝ๊ณ ํ•˜๊ธฐ ์œ„ํ•ด ์ด๋ฏธ # 255๋ฅผ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  9 ๋Œ“๊ธ€

rowSpan ํ•˜๋ฉด ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. el.rowSpan = 2; ์ˆ˜ํ–‰ํ•˜๋Š” DOM ์ธํ„ฐํŽ˜์ด์Šค์™€์˜ ์ผ๊ด€์„ฑ์„ ์œ„ํ•ด ์†์„ฑ์— camelcase ๋ฒ„์ „์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์ด๊ฒƒ์— ๋Œ€ํ•ด ํ˜ผ๋ž€์Šค๋Ÿฌ์›Œํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž˜๋ชป๋œ ์ผ€์ด์Šค๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ฒฝ๊ณ ํ•˜๊ธฐ ์œ„ํ•ด ์ด๋ฏธ # 255๋ฅผ ์—ด์—ˆ์Šต๋‹ˆ๋‹ค.

์•„, ๊ทธ ๊ฑฐ์˜ˆ์š”. ๊ณ ๋งˆ์›Œ์š” :) ์žฅ๊ธฐ์ ์œผ๋กœ # 255์˜ ํ•ด๊ฒฐ์„ ๊ธฐ๋‹ค๋ฆฌ ๊ฒ ์ง€๋งŒ ๋‹จ๊ธฐ์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์กฐ์ •ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค ...

๊ทธ๊ฒƒ์€ :) ์ˆ˜ ์žˆ์—ˆ๋‹ค ์ฃ„์†กํ•ฉ๋‹ˆ๋‹ค @ericclemmons ๋‚˜๋Š” ์†์„ฑ์ด ์‚ฌ์ „ 0.4 ๋ˆ„๋ฝ ๋œ ํŒจ์Šค๋ฅผํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜์ง€๋งŒ ๋‚˜๋Š” ๊ฒฝ์šฐ ์•„๋ฌด๊ฒƒ๋„์—์„œ ๋ˆ„๋ฝ https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig .js , ๋ฌธ์ œ ๋˜๋Š” PR์„ ์ž์œ ๋กญ๊ฒŒ์—ฌ์‹ญ์‹œ์˜ค.

์•„, ์™„์ „ํžˆ rowSpan (camelCased!)๊ฐ€ ๋ˆ„๋ฝ ๋œ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค . PR์„ ์ œ์ถœํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค ...

์ด๋Ÿฐ! ๋‚˜๋Š” colSpan์„ ๋ณด์•˜๊ณ , rowSpan๋„ ๊ฑฐ๊ธฐ์—์žˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ์ˆœ์ง„ํ•˜๊ฒŒ ๊ฐ€์ •ํ–ˆ๋‹คโ€ฆ :)

@ericclemmons ์•„์ง๋„์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ์œผ์‹ญ๋‹ˆ๊นŒ?

# 291 ๋งˆ๋ฌด๋ฆฌ ...

์ด๋กœ ์ธํ•ด ์‚ฌ๋žŒ๋“ค์ด DOM๊ณผ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ๋Œ€์‹  HTML๊ณผ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๊ณ  ๋ชจ๋‘ ์†Œ๋ฌธ์ž ์†์„ฑ์„ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

"autocomplete"์†์„ฑ์— ๋Œ€ํ•œ์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ๋ฌธ์„œ๋กœ ๋Œ์•„ ๊ฐ€์•ผํ–ˆ์Šต๋‹ˆ๋‹ค.

์ €๋Š” HTML์ฒ˜๋Ÿผ ๋ณด์ด๋Š” ๊ฒƒ์„ ์ž‘์„ฑํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. HTML์ฒ˜๋Ÿผ ์ž‘๋™ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ์ผ๊ด€์„ฑ์ด ์•„๋‹ˆ๋ผ ๋ถˆ์ผ์น˜์ž…๋‹ˆ๋‹ค.

๋‚˜๋Š” ๋™์˜ํ•œ๋‹ค. ์†์„ฑ์ด ๋ชจ๋‘ .toLowerCase() ๋งคํ•‘ ๋œ ๊ฒฝ์šฐ (๋‚˜์—๊ฒŒ) ๋ฐ”๋žŒ์งํ•ฉ๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰