Reactコンポーネントの配列内の最後の要素に動的に小道具を追加する

Question

これは私がどこでも検索した質問ですが、解決策が見つからないため、小道具オブジェクトを編集できません。

これは今まで行われていることです。メニューがあります。このメニューには、サブセクションがあります。現在、次のようなことを実現しています：

sectionEnd propは、メニュー項目の後に区切り文字を追加してメニューを分割します。しかし、誰かがメニュー項目を追加したらどうなるでしょうか？彼らはsectionEnd propを確実に動かさなければなりません。私がしたいのは、このセクションを各配列の最後の要素のコンポーネントに追加することです。これは可能ですか？もしそうなら、どうですか？

Answer 1

各menuitemにキーを追加することができます。配列はlastItemsで、状態の各セクションに最後に追加された項目のキーが含まれます。次に、各項目のレンダリング時に、そのキーがlastItemsに含まれているかどうかをチェックして除算を追加できます。 JSXにおけるその後

let firstItems = [{ onclick:() => {}},{ onclick:() => {}}]; 

と、：私の意見で

Answer 2

アイテムを構築するために説明として、配列内のオブジェクト（プレーン）を.MAP使用および管理次いでアレイを使用した方がよい

{ firstItems.map((item, index) => (
    <MenuItem 
     onClick={item.onClick} 
     sectionEnd={index === firstItems.length - 1} 
    /> 
)) 
} 

したがって、インスタンス化されたJSX要素ではなく、オブジェクトとプロパティの単純な配列を使用してプロパティを変更することができます。

Answer 3

メニューを動的に作成し、最後の要素を追跡します。ここに私の意味は次のとおりです：

class List extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     items: ['I', 'like', 'SO'], 
     item: '', 
     last: 2 
    } 
    this.add = this.add.bind(this); 
    this.change = this.change.bind(this); 
    } 
    change(e){ 
    this.setState({ 
     [e.target.name]: e.target.value 
    }) 
    } 
    add(){ 
    const last = this.state.items.length; 
    this.setState({ 
     items: [...this.state.items, this.state.item], 
     last, 
     item: '' 
    }) 
    } 

    render(){ 
    return (
     <div> 
     <ul> 
      {this.state.items.map((item, i) => 
      <li key={item}> 
       {item} 
       // here you can pass props only to the last element 
       // i just print it as the last element 
       {this.state.last === i ? ' - Last' : ''} 
      </li>) 
      } 

     </ul> 
     <input name="item" type="text" value={this.state.item} onChange={this.change}/> 
     <button onClick={this.add}>Add new</button> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <List />, 
    document.getElementById('container') 
); 

労働者exampleです。

Answer 4

なぜHOCを使用しないのですか？繰り返し処理を行う場合、あなたはそう

const WithSectionEndAtLastItem = (props) => { const {size, index, ...menuProps} = props; 
const isLastItem = size - 1 === index; 
return <MenuItem {...menuProps} sectionEnd={isLastItem} \>}; 

のようなものを持っているので、HOCはただ、現在のアレイと反復を超える現在のインデックスの大きさについて知っておく必要があるように、そのように、あなたは、単に、きれいなあなたのMenuItemコンポーネントを残すことができます要素は次のようになります

const size = firstItems.length; 
const currentSection = firstItems.map((props , index) => <WithSectionEndAtLastItem {...props} index={index} size{size} \>); 
return currentSection; 

これはすべきことです。

あなたが役に立ったら嬉しいです。

Answer 5

あなたは、より表現方法でそれを見なければならないかもしれない：

const firstSectionItems = [ 
    <MenuItem onClick={() => {}} />, 
    <MenuItem onClick={() => {}} />, 
    <MenuItem onClick={() => {}} />, 
]; 
const secondSectionItems = [ 
    <MenuItem onClick={() => {}} />, 
    <MenuItem onClick={() => {}} />, 
    <MenuItem onClick={() => {}} />, 
]; 

const items = [...firstSectionItems, <MenuDivider />, ...secondSectionItems]; 

さらに良いことに、あなたはその後、分周器の動作をラップするMenuSectionコンポーネントを作成することができます。

const MenuSection = ({ items }) => ([ 
    ...items, 
    <MenuDivider />, 
]); 

const menu = [ 
    <MenuSection items={firstSectionItems} />, 
    <MenuSection items={secondSectionItems} />, 
];