reactjs - 动态设置组件的 props

Question

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

Answer 1

正确的方法是使用React的cloneElement方法( https://facebook.github.io/react/docs/react-api.html#cloneelement )。 您可以通过执行以下操作来实现您想要的目标:

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