React中如何向Story组件传递query等多个prop值

你可以按照以下步骤修改代码完成query值的传递：

• 调整Story组件的props声明，新增query参数用来接收传入的查询值
• 在Feedbacks组件中渲染Story时，额外将已经解构好的query作为prop传入
• 额外修复原代码隐式问题：原代码中key绑定的是feedbacks.id（整体数组的id，不存在或重复），需要改为当前遍历项的feedback.id避免渲染报错

修改后的完整代码如下：

// 新增query参数接收
function Story({data, query}) {
    // 组件内部可直接使用query变量做业务逻辑
    return (<div></div>)
}

function Feedbacks({feedbackdata}) {
     const {query, feedbacks} = feedbackdata;
      
     return (
         <div>
             {feedbacks.length > 0 && feedbacks.map(feedback => 
                <Story 
                    key={feedback.id} 
                    data={feedback}
                    {/* 额外传入query prop */}
                    query={query}
                />
             )}
         </div>
     )
 }

内容的提问来源于stack exchange，提问作者ThinkGeek