时间戳

首页 > 解决方案 > 为什么嵌套组件不会渲染？

reactjs - 为什么嵌套组件不会渲染？

问题描述

我正在尝试将 Item 组件插入到主组件中，但它没有呈现。如果我将组件的内容直接插入 RenderItems - 它可以工作。怎么了？

const Item = (id, text) => {
    <div>
    <p>{id}</p>
    <p>{text}</p>
    </div>
};

class RenderItems extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items_array: [{id: 1, text: "text1"}, {id: 2, text: "text2"}, {id: 3, text: "text3"}],
        };

    }

    render() {
        return (
            <div>   
                {this.state.items_array.map(i => <Item id={i.id} text={i.text} /> )}
            </div>
        );
    }
}

有用：

render() {
    return (
        <div>   
            {this.state.items_array.map(i => {
            <div>   
                <p>{i.id}</p>
                <p>{i.text}</p>
            </div>
            })}
        </div>
    )
}

}

标签： reactjscomponents

解决方案

item 函数需要一个 return 并作为 props 导入，而不是直接创建函数

const Item = ({id, text}) => {
    return (<div>
    <p>{id}</p>
    <p>{text}</p>
    </div>)
};

或者

使用括号而不是像这样的花括号：-

const Item = (id, text) => (
    <div>
    <p>{id}</p>
    <p>{text}</p>
    </div> );

推荐阅读