Laravel 7 + React 渲染错误：渲染没有返回任何内容

Question

我在 Laravel 7 应用程序中有简单的反应组件。如果我尝试编写渲染方法，它会给我一个错误：渲染没有返回任何内容。如果我只使用 return() 而没有渲染它可以工作。我做错了什么？

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

Answer 1

render 函数用于基于类的组件中，因为您使用的是函数式组件，所以您不需要 render 方法，只需 return 来渲染您的 JSX。

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