动态设置组件的道具

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

可以通过分配组件引用而不是 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/