Question

我在Laravel 7应用程序中具有简单的react组件。如果我尝试编写render方法，则会抛出一个错误： render没有返回任何内容。如果我仅使用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");
    }
}

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

1 个答案: