Reactjs 如何根据参数将函数结果传递给props

我的程序有一个页面，可以将名为CanvasCard的组件重复9次。 那是你的结构

                      <Row className='card-columns'>
                      <CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                        description={this.state.description}
                        list={this.state.list}
                      />                      
                      <Row style={{ margin: '0px' }}>
                        <CanvasCard title='Atividades Chave' cardID='2' class='card-height' color='green'
                          description={this.state.description}
                          list={this.state.list}
                        />
                        <CanvasCard title='Recursos Chave' cardID='3' class='card-height' color='orange'
                          description={this.state.description}
                          list={this.state.list}
                        />
                      </Row> ....

我调用此阵列9次（每个CanvasCard组件调用一次）

canvasCard组件接收此数组并检查哪些对象具有各自的ID。 例如，该示例的第一张画布如下：

 <CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                            description={this.state.description}
                            list={this.state.list}
                          />                      

在每个CanvasCard组件中，如何仅传递一个包含各自对象的数组（根据cardID），而不是使用

this.state.list

，传递所有数组

我尝试过这样做，但不起作用：

                       canvasCardData = id => {        
                         return this.state.list[0].cards.filter(x => x.cardID == id)    
                       }

                       <CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                        description={this.state.description}
                        list={() => canvasCardData(1)}
                      />                                               
                       <CanvasCard title='Atividades Chave' cardID='2' class='card-height' color='green'
                         description={this.state.description}
                         list={() => canvasCardData(2)}
                       />
                       <CanvasCard title='Recursos Chave' cardID='3' class='card-height' color='orange'
                         description={this.state.description}
                         list={() => canvasCardData(3)}
                       />

canvasCardData=id=>{
返回此.state.list[0].cards.filter（x=>x.cardd==id）
}
canvasCardData（1）}
/>                                               
canvasCardData（2）}
/>
canvasCardData（3）}
/>

您传递的是数字而不是字符串。您需要使id类型一致

必须使用

map

渲染每个组件

---

您可以查看

您的意思是要查看卡阵列并使用其各自的属性动态生成卡组件吗。。如果是这样的话，你有没有试过在上面绘制地图？@Panther我试过，我的问题是当我做的时候`list={（）=>canvasCardData（cardd）}你能展示你的

卡片

数据吗？？显示的卡数据没有

\u id

property@Panther我更新了问题。有一个

\u id

，我删除了它以简化我的问题。您正在将一个函数传递给

列表

，我希望您在内部调用它。如果不只是发送`list={canvasCardData（'3'）}，那也没什么区别，因为我没有使用这个操作符：

==

你可以构建一个包含相关数据的新数组，然后只使用map

0: {description: "parceiro 01", cardID: "1"}
1: {description: "parceiro 02", cardID: "1"}
2: {description: "parc3", cardID: "1"}

                       canvasCardData = id => {        
                         return this.state.list[0].cards.filter(x => x.cardID == id)    
                       }

                       <CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                        description={this.state.description}
                        list={() => canvasCardData(1)}
                      />                                               
                       <CanvasCard title='Atividades Chave' cardID='2' class='card-height' color='green'
                         description={this.state.description}
                         list={() => canvasCardData(2)}
                       />
                       <CanvasCard title='Recursos Chave' cardID='3' class='card-height' color='orange'
                         description={this.state.description}
                         list={() => canvasCardData(3)}
                       />