набора компонентов динамически

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

Правильный способ заключается в использовании РЕАКТА метода 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, когда дело переключатель выходит из строя.

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} /> все свойства из объекта элемента будет установлено в детской компоненте.

3.It можно использовать стандартный образ, как: <C title={item.title} />

Некоторого рабочего пример: https://jsfiddle.net/maciejsikora/jtt91wL3/3/