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>
        );
    }
};

这个想法是定义一个数组selectedNumbers，它是一个跨度数组，每个数组都有一个onclick事件。然后渲染它们。

此代码在转换为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

是的，问题发生在props.selectedNumbers。在使用this时，试图找出ES6绑定方式的变化，我从代码中的其他位置的绑定中删除了一个空格。

这：

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

在反应道具中绑定是不好的做法（https://daveceddia.com/avoid-bind-when-passing-props/），考虑使selectNumber成为更高阶函数：

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

将onClick设置为：

<div className={className} onClick={selectNumber(i)}>

Answer 3

我知道这只是做同样事情的另一种方式，但......

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

React - 在创建JSX组件数组时，对象无法作为React子进程

3 个答案: