Question

我有一个包含对象的数组名称任务。对象有 3 个属性 id、name 和 subTask。 subTask 也是一个数组，其中包含具有 2 个属性 id 和 name 的对象。

现在我的问题是如何在 react.js 的组件返回中返回元素。

我想做的例子 =>

render(){
    return(
        this.state.task.map((e,i)=>{
        
            //return some elements based on task element
            return <some element 1/>
  
            //Also I want to check if an property subTask 
            //of object of task array have some objects or not 
            //if yes then return some elements based on 
            //subTask array element
            if(e.subTask.length!==0){
                e.subTask.map((e2,i2)=>{
                    return <some element 2/>
                })
            }
        })
    )
}

在此代码中，如果我返回则由于返回而无法执行 if 语句。但是我也想执行 if 语句。我怎样才能做到这一点？

这里有人可以帮我吗？

Answer 1

您可以改为编写以下内容：

render() {
    return this.state.task.map((e, i) => {
        //return some elements based on task element
        return (
            <>
                <SomeElement />
                {e.subTask.length &&
                    e.subTask.map((e2, i2) => <SomeElement />)}
            </>
        );
    });
},

这将渲染第一个元素，基于父元素，如果有子任务，它将加载父元素下的那些

Answer 2

如果你想在某些条件下渲染，你可以使用 ES6 语法基于映射数组的条件进行条件渲染。下面的例子

return (
     tasks.map((task) => { 
         if (subTask.length != 0) {
             subTask.map(subtask) => return <SomeElement />
            }
        }
      )

如何根据数组内对象的属性返回元素

2 个答案: