使用props时React无法渲染，Card组件异常求助

问题根源 #

你的代码里ReactDOM.render({cards}, document.getElementById("root"))这一行存在错误——你传入了一个包含cards的普通对象，而非React可识别的JSX元素/元素数组。React无法解析这类对象，导致组件无法渲染。而直接用data[0].img时，是在组件内直接引用数据，绕开了这个render参数的错误，所以能正常显示。

修复代码 #

把ReactDOM.render的第一个参数改成cards（React 16+支持直接渲染元素数组），或者包裹在一个根元素里（兼容所有React版本）：

var data = [{
    id: 1,
    name: "tokyo",
    descr: "a",
    img: "/tokyo.png"
}]

function Card(props) {
    return (
        <div>
            <img src={props.img}/>
            <h1> {props.name}</h1>
            <p> {props.descr}</p>
        </div>
    )
}

const cards = data.map(item => {
    return (
        <Card
            img={item.img}
            name={item.name}
            descr={item.descr}
            key={item.id} />
    )
})

// 修复后的render调用，二选一即可
ReactDOM.render(cards, document.getElementById("root"))
// 或者兼容旧版本的写法：
// ReactDOM.render(<div>{cards}</div>, document.getElementById("root"))

验证逻辑 #

修改后，React能正确接收cards数组（或包裹后的根元素），逐一渲染每个Card组件，props也能正常传递和使用。

内容的提问来源于stack exchange，提问作者Earl Grey