实例化React组件时如何传入属性？触发Objects are not valid报错如何解决？

错误原因 #

• 直接new PersonProfileBadge()得到的是类组件的实例对象，不是React可识别的渲染元素，所以触发「对象不能作为React子元素」报错。React渲染要求传入通过React.createElement（即你代码里的e）创建的元素对象，而非手动实例化的组件对象。
• 之前可运行的写法没有传参，是因为e的第二个参数就是专门用来给组件传递props的入口。

正确实现方式 #

1. 传入属性的写法 #

调用e创建组件元素时，把要传递的属性作为第二个参数传入即可：

const navProfilePicture = document.querySelector('#profile_image');
ReactDOM.render(e(PersonProfileBadge, { alias: 'stupidfatcat' }), navProfilePicture);

2. 组件代码优化建议 #

你在constructor里把props.alias赋值给this.alias的操作是冗余的，完全可以直接在render里读取this.props.alias，简化后的组件代码如下，更符合React设计规范：

class PersonProfileBadge extends React.Component {
    render() {
        return e(
            'img',
            {
                src: `https://internal-cdn.com/somepath/?uid=${this.props.alias}`,
                className: 'profile_photo'
            }
        );
    }
}

内容的提问来源于stack exchange，提问作者Stupid.Fat.Cat