你可以将 props 传递给 JSX 引用吗?

Posted

技术标签:

【中文标题】你可以将 props 传递给 JSX 引用吗?【英文标题】:Can you pass props to a JSX reference? 【发布时间】:2020-09-23 16:16:59 【问题描述】:

在我开始我的问题之前,请允许我澄清一下 - 这里的问题是对问题的简化,我正在为一个客户在很短的时间内为一个遗留项目开发一个已经很大的代码库,然后重新构建数据比试图弄清楚这一点需要更多的时间 - 我知道这不是尝试传递道具的理想方式,所以请不要只链接到有关如何传递道具的教程

它的要点是,我有一大堆对象,所有这些对象都具有以下属性 icon: <SomeJSXReference /> 我基本上创建了一个可重用的抽象组件,它根据某些传递的道具返回图标属性。

问题是,我需要将其中一个道具传递给icon 引用本身。 这是我写的一个粗略的伪组件,让它更清楚一点。

const objectsArray = [ icon: <SpecificIcon /> , /*...*/]
const Simplified = (props:  color: string ) => 
  const  color  = props
  const toRender = objectsArray.someOperationsLeadingToFinalObjectReference()
  return toRender.icon

我需要做的是以某种方式将 stroke=color 属性附加到 toRender.icon 指针内引用的 JSX

结果基本上在

&lt;toRender.icon stroke=color /&gt; (渲染为伪指针,注意小写) &lt;SpecificIcon stroke=color /&gt; (相当于上面的=应该返回的)^

注意:这不一定是 &lt;SpecificIcon /&gt;,而是 toRender.icon 指向的任何 JSX.Element

我有什么办法可以做到这一点,我没有想到吗?

【问题讨论】:

如果 toRender.icon 是一个组件,返回 应该可以工作...注意toRender.item vs ToRender.Icon 问题是,我不知道toRender.icon 的结果是什么。基本上我需要&lt;SpecificIcon stroke=color /&gt;。所以我不能只是手动输入。 &lt;ToRender.icon /&gt; 只是一个未定义的不存在元素。除非我以某种方式误解了你? 【参考方案1】:

有两种方法可以做到。

    如果组件已经构造(构造的含义参见JSX in Depth):
 icon: <SpecificIcon /> 

你可以使用React.cloneElement:

[<Counter />].map(Component => React.cloneElement(Component,  num: 5 ))
    如果组件未构造(这是更好的方法,因为函数/构造器尚未执行):
 icon: SpecificIcon 

你可以在传递props的时候渲染它:

[Counter].map((Component, index) => <Component key=index num=2 />)

查看完整示例:

const Counter = ( num = 0 ) => <div>num</div>;

const App = () => 
  return (
    <>
      <Counter />
      [<Counter />].map(Component =>
        React.cloneElement(Component,  num: 4 )
      )
      [Counter].map((Component, index) => (
        <Counter key=index num=2 />
      ))
    </>
  );
;

【讨论】:

嘿@DennisVash,感谢您的精彩回答。只是一个小细节,完整示例中的第二个变体不应该说&lt;Component key=index num=2 /&gt;吗?如果您可以立即引用&lt;Counter /&gt;,这有点违背了整个目的,显然它会在您的示例中起作用,因为它是在同一个文件中声明的,但具体问题并非如此。 在您的帖子的最底部,在您的完整示例中,您映射了计数器引用并在您提取 Component 的函数参数内,但是您最终返回构造的 &lt;Counter /&gt; 而不是提取的 @ 987654333@。我在这里说得通吗,还是还不清楚? 为了表明它是动态的,如果是[Counter,Icon,Something],名字无关紧要,例如可以引用为CoolComponent 我猜,但这只有在您总是专门返回 Counter 时才有效。这个问题的真正目的是,您可能并不总是返回它,因此您并不总是想明确地构造Counter,而是toRender.icon 指向的任何引用。简而言之,您最终总是返回相同的组件,同时在我的情况下,返回的内容会有所不同。无论哪种方式,都没关系,找到一种方法来适应我的目的:-) 是的,这正是我在我的案例中所做的。我想部分原因是我只提供了一个模糊的伪示例:-)

以上是关于你可以将 props 传递给 JSX 引用吗?的主要内容,如果未能解决你的问题,请参考以下文章

react属性展开...props

将 React jsx 中的 props 作为泛型传递

我可以通过 props.children React JS 将道具传递给孩子吗

Vue 中,如何将函数作为 props 传递给组件

reactjs学习--02

如何将可变数量的道具传递给 React 中的 JSX 标签