Question

import React from 'react'

const fruits = [
  { id: 1, text: `mango` },
  { id: 2, text: `apple` },
]

const Fruit = ({ fruit }) => (
  <div>{ fruit.id } - { fruit.name }</div>
)

const Fruits = ({ component }) => (
  <ul>
    { fruits.map( fruit => <li>{ component({ fruit }) }</li> ) }
  </ul>
)

export const Parent = () => (
  <div>
    <Fruits component={ <Fruit /> } />
  </div>
)

如上例所示，由于道具是从子对象中循环的对象数组获得的，因此道具不能从父对象传递。

运行此代码时，显然会引发错误：

TypeError：组件不是函数

我该如何处理？

Answer 1

选项很少：

克隆元素并为其添加道具。

import React, { cloneElement } from "react";

export const Parent = () => (
  <div>
    <Fruits component={<Fruit />} />
  </div>
);

const Fruits = ({ component }) => (
  <ul>
    {fruits.map((fruit) => (
      <li>{cloneElement(component, { fruit })}</li>
    ))}
  </ul>
);

我通常会避免这样做。 cloneElement确实有一些用途，但是使用它并不常见，因此可能不熟悉，因此难以理解和维护。另外，我认为您的方案有更好的选择：

传递组件而不是元素，然后让孩子将其变成元素

export const Parent = () => (
  <div>
    <Fruits component={Fruit} />
  </div>
);

const Fruits = ({ component: Component }) => (
  <ul>
    {fruits.map((fruit) => (
      <li>
        <Component fruit={fruit} />
      </li>
    ))}
  </ul>
);

这很简单，但是确实使两个组件紧密耦合。 Parent和Fruits必须在同一页面上，确切说明将要发送到其他组件的道具。如果您使用的方法数量有限，我会使用这种方法，因此您不介意它是否不太灵活。

传递一个函数，该函数知道如何从道具创建元素，并让孩子通过道具调用该函数。

export const Parent = () => (
  <div>
    <Fruits component={(props) => <Fruit fruit={props.fruit} />} />
  </div>
);

const Fruits = ({ component }) => (
  <ul>
    {fruits.map((fruit) => (
      <li>{component({ fruit })}</li>
    ))}
  </ul>
);

这减少了组件之间的耦合，因为Fruits不再假设子组件的道具名称是什么。这种方法通常称为"render prop"。如果您需要更高的灵活性，我会使用这种方法。

Answer 2

尝试一下

const Fruits = ({ component }) => (
      <ul>
        { fruits.map( f => <li><component fruit={</f>} ></li> ) }
      </ul>
  )

Answer 3

import React from 'react'

const Base = ({ item }) => (
  <li>{ item.id } - { item.name }</li>
)

const BaseItems = ({ items }) => (
  <ul>
    { items.map((item, i) => <Base key={i} item={item} /> ) }
  </ul>
)

const fruits = [
  { id: 1, text: `mango` },
  { id: 2, text: `apple` },
]

const vegetables = [
  { id: 1, text: `potato` },
  { id: 2, text: `broccoli` },
]

export const Parent = () => (
  <div>
    <BaseItems items={fruits} />
    <BaseItems items={vegetables} />
  </div>
)

您可以简单地尝试一下。

如何将道具传递给作为父项从父级收到的组件？

3 个答案: