Question

我有一个表组件，其中有一个属性“ head”。该头需要一个数组值。当我将带有单元格的行组件传递给div数组时，我可以访问这些单元格并在其上使用map函数。但是，如果我将此行组件传递给具有相同结构的包装器组件，然后在头部使用该包装器组件，则无法访问单元格。

工作代码

head={[
        <Row
        cells={[
            <div key={0}>Head1</div>,
            <div key={1}>Head2</div>,
            <div key={2}>Head3</div>,
            <div key={3}>Head4</div>
        ]}
        />
    ]}

带有包装器组件的代码

const wrapper = () => <Row
                            cells={[
                                <div key={0}>Head1</div>,
                                <div key={1}>Head2</div>,
                                <div key={2}>Head3</div>,
                                <div key={3}>Head4</div>
                            ]}
                        />

head={[<wrapper />]}

即使我使用包装器组件，我也想访问行组件下的单元格数组

Answer 1

您不必使用匿名function。只需将Row的值作为wrapper传递给您即可。

const wrapper = <Row
    cells={[
       <div key={0}>Head1</div>,
       <div key={1}>Head2</div>,
       <div key={2}>Head3</div>,
       <div key={3}>Head4</div>
     ]}
 />

head={[<wrapper />]}

如何获取嵌套的组件道具？

1 个答案: