React - JSXコンポーネントの配列を作成するときにオブジェクトがリアクションの子として有効でない

Question

私は古いReact.createComponentのプロジェクトを新しいES6クラス定義に変換しています。

class AnswerFrame extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     var props = this.props; 
     var selectedNumbers = props.selectedNumbers.map(function (i) { 
      return (
       <span onClick={props.unselectNumber.bind(null, i)}> 
        {i} 
       </span> 
      ) 
     }); 

     return (
      <div id="answer-frame"> 
       <div className="well"> 
        {selectedNumbers} 
       </div> 
      </div> 
     ); 
    } 
}; 

アイデアは、それぞれのonclickイベントを有するスパンの配列である配列、selectedNumbersを定義することである：私は、次の成分を有します。これらはレンダリングされます。

このコードはES6に変換する前にうまく働いたが、今私に次のエラー与えている：これはもう機能していないのはなぜ

Error: Objects are not valid as a React child 
(found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances}). 
If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `AnswerFrame`. 

を？

Answer 1

問題が判明したのはでした。 ES6を使用すると、thisが変更されたことがわかりました。コード内の他の場所のバインドからnullを削除しました。

この：

numbers.push(
    <div className={className} onClick={selectNumber.bind(i)}> 
     {i} 
    </div> 
); 

が

numbers.push(
    <div className={className} onClick={selectNumber.bind(null,i)}> 
     {i} 
    </div> 
); 

のでprops.selectedNumbersしてきたはずですが、問題の原因となっ目的でした。でバインディング

Answer 2

は小道具を反応selectNumber高階関数を行うことを検討、悪い習慣（https://daveceddia.com/avoid-bind-when-passing-props/）です：

const selectNumber = (i) =>() => { 
    // your original function code here 
    doWhateverWith(i); 
} 

とTOのonClickを設定：

​​

Answer 3

私は、これはもうひとつの方法であることを知っていますしかし同じことをしているのですが...

members.push(
    <div className={className} onClick={() => {selectedNumber(i);}}> 
     {i} 
    </div> 
);