我在Laravel 7应用中有简单的反应元件。如果我尝试编写render方法,它会抛出一个arror:Nothing从render. (如果我只使用一个return() wihtout呈现)返回,它可以工作。我做错了什么?
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'));
}发布于 2020-08-07 12:21:36
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");
}
}https://stackoverflow.com/questions/63301228
复制相似问题