首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Laravel 7+反应渲染错误:渲染中没有返回任何内容

Laravel 7+反应渲染错误:渲染中没有返回任何内容
EN

Stack Overflow用户
提问于 2020-08-07 11:50:12
回答 1查看 75关注 0票数 2

我在Laravel 7应用中有简单的反应元件。如果我尝试编写render方法,它会抛出一个arror:Nothing从render. (如果我只使用一个return() wihtout呈现)返回,它可以工作。我做错了什么?

代码语言:javascript
复制
import React from 'react';
import ReactDOM from 'react-dom';

function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        test: 'this is state.test value'
    }

    function render() {

        const list = state.list.map(item => {
            <li>{item}</li>
        })

        return (
            <div onClick={handleClick}>This is Items List component and {state.test}</div>
        )
    }


    function handleClick(e) {
        alert("beeeeeeeeeeeeeeeeeee");
    }
}

export default ItemsList;

if (document.getElementById('itemsList')) {
    ReactDOM.render(<ItemsList />, document.getElementById('itemsList'));
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-07 12:21:36

render函数在基于类的组件中使用,因为您使用的是函数组件,所以不需要render方法,只需要return来呈现JSX。

代码语言:javascript
复制
function ItemsList() {

    /*constructor(props)
    {
        //super(props);
        //this.state.list = [1,2,3,4,5,6,7,8,9];
    }*/

    let state = {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        test: 'this is state.test value'
    }

        const list = state.list.map(item => {
            // Here this is JSX element so you must return it.
            return (<li>{item}</li>)
        })

return (
            <div onClick={handleClick}>This is Items List component and {state.test}</div>
<ul>{list}</ul>
        )



    function handleClick(e) {
        alert("beeeeeeeeeeeeeeeeeee");
    }
}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63301228

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档