Question

我需要在将组件存储在变量中之后设置它，这里是伪代码：

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里面我运行一个循环，我需要为存储在变量中的组件设置道具....如何为我之前存储在变量中的这个组件设置道具？

Answer 1

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

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

Answer 2

您可以在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案例，因为React会忽略undefined，当切换案例失败时，map会返回{{1}}。

Answer 3

可以通过分配非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/

动态设置组件的道具

3 个答案: