动态设置组件的 props

Posted 2023-02-21

【中文标题】动态设置组件的 props

【英文标题】：Set component's props dynamically

【发布时间】：2017-03-04 17:21:46

【问题描述】：

我需要将组件的props存储在一个变量中后，这里是伪代码：

render()

    let items = [title:'hello', title:'world'];
    let component = false;

    switch (id) 
      case 1:
        component = <A />
        break;
      case 2:
        component = <B />
        break;      
    

    return(
      items.map((item, index)=>
        return(
          <span>
            /* SOMETHING LIKE THIS WOULD BE COOL - IS THAT EVEN POSSIBLE*/
            component.props.set('title', item.title)
          </span>11

        )
      )
    )
  

在return 内部，我运行一个循环，我需要为存储在变量中的组件设置道具...。如何为我之前存储在变量中的该组件设置道具？

【问题讨论】：

在渲染过程中不能改变 state 或 prop，可以使用 componentDidUpdate 或 componentWillReceiveProps 来实现

在这里克隆组件是一个不好的选择，因为它会为克隆的组件创建额外的内存来影响性能。并且，克隆后的原始组件变得无用。同样，这是一种糟糕的实现方式。

【参考方案1】：

您可以将switch 移动到map() 中。希望这会有所帮助！

class A extends React.Component
  render()
    return <h1>Inside Component A:this.props.title</h1>
  


class B extends React.Component
  render()
    return <h1>Inside Component B: this.props.title</h1>
  


class Parent extends React.Component
  render()
      let items = [title:'hello', title:'world'];
      const finalItems = items.map((item, index) => 
         switch (parseInt(this.props.id)) 
            case 1:
             return <A title=item.title/>
            case 2:
             return <B title=item.title/>     
         
       )

      return(
        <span> finalItems </span>
      )
    
 
ReactDOM.render(<div>
                  <Parent id="1"/>
                  <Parent id="2"/>
                  <Parent id="3"/>
                </div>,
  document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

你不需要添加default case，因为 React 会忽略 undefined，当 switch case 失败时会返回到 map。

【讨论】：

Switch by id 与 items 循环无关，因此应在外部调用，您在每个循环中都执行相同的操作，并且此操作应仅执行一次。这段代码的性能很差，这是不好的做法。

@MaciejSikora 添加了一个工作示例。希望这可以澄清！

【参考方案2】：

这可以通过分配不是 jsx 而是组件引用来完成，然后在循环中使用 jsx 并使用来自变量的组件。检查我的代码更改。

render()

let items = [title:'hello', title:'world'];
let C = null; //null is more accurate for object variable

switch (id) 
  case 1:
    C = A; //it is component reference, C must be from upper letter
    break;
  case 2:
    C = B; //it is component reference
    break;
  default:
    C = A; //good to have default for wrong ids      


return(
  items.map((item, index)=>
    return(
      <span>
        <C ...item /> //render component with props
      </span>11

    )
  )
)

最重要的事情：

1.C=A; 我们设置了对目标组件的变量 C 引用

2.<C ...item /> item 对象的所有属性都将在子组件中设置。

3.它可以以标准方式使用，例如：<C title=item.title />

一些工作示例：https://jsfiddle.net/maciejsikora/jtt91wL3/3/

【讨论】：

当C 变成null，因为我在switch 中没有看到default 的情况来处理这种情况，React 会抛出一个错误。你可以试试！

@PraneshRavi 非常有趣，您在哪里看到默认为 false？什么对标准 switch 语句有反应？是的，你自己试试吧！问题是关于如何将 props 设置为动态分配的组件，而不是关于 switch 中的默认值。

检查 id 为 3 的 false 代码并发生同样的问题，我对 null 的更改没有造成任何伤害。你评论没有意义你给我-1，因为原始答案在开关中没有默认值。而且我有适当的理由拒绝您的回答 - 首先是无缘无故拒绝我的回答，其次是您的回答很差。

检查我的 sn-p。试着让你的代码工作。当您通过id="3" 时，您的代码将中断

我再重复一遍，没有默认的切换是在原始代码中，这不是我回答的一部分。请阅读我的 cmets，您争论的是 switch 语句而不是真正的答案内容。我添加了默认以在没有感觉的情况下停止此对话，但这没有任何意义。和花花公子，你是个很烦人的家伙。真的，您无缘无故地开始了这次对话！

【参考方案3】：

正确的方法是使用 React 的 cloneElement 方法（https://facebook.github.io/react/docs/react-api.html#cloneelement）。 您可以通过以下方式实现您想要的：

<span>
  
    React.cloneElement(
      component,
      title: item.title
    )
  
</span>

【讨论】：

任何人都知道如何在创建后从父级更新克隆元素道具？？