动态设置组件的 props答案

【问题标题】：Set component's props dynamically动态设置组件的 props
【发布时间】：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 来实现
在这里克隆组件是一个不好的选择，因为它会为克隆的组件创建额外的内存来影响性能。并且，克隆后的原始组件变得无用。同样，这是一种糟糕的实现方式。

标签： reactjs react-jsx jsx

【解决方案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>

【讨论】：

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