Set thành phần của động

Question

tôi cần phải đặt đạo cụ thành phần sau khi nó được lưu trữ trong một biến, đây là mã giả:

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 

     ) 
     }) 
    ) 
    } 

Bên return tôi chạy một vòng lặp mà tôi cần phải đặt đạo cụ cho các thành phần đó là được lưu trữ bên trong một biến .... Làm thế nào để thiết lập các đạo cụ cho thành phần này mà tôi đã lưu trước đó trong một biến?

Answer 1

Cách thích hợp là sử dụng của phương pháp Phản ứng cloneElement (https://facebook.github.io/react/docs/react-api.html#cloneelement). Bạn có thể đạt được những gì bạn muốn bằng cách thực hiện:

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

Answer 2

Bạn có thể di chuyển switch bên trong map(). Hi vọng điêu nay co ich!

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>

Bạn không cần phải thêm một trường hợp default như Phản ứng sẽ bỏ qua undefined, mà sẽ được trả lại cho map khi các trường hợp chuyển đổi thất bại.

Answer 3

Nó có thể được thực hiện bằng cách chỉ định không jsx nhưng tham chiếu thành phần, sau đó sử dụng jsx trong vòng lặp với việc sử dụng thành phần từ biến. Kiểm tra các thay đổi mã của tôi.

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 

    ) 
    }) 
) 
} 

điều quan trọng nhất:

1. C=A; chúng ta thiết lập trên tài liệu tham khảo C biến để nhắm mục tiêu thành phần

2. <C {...item} /> tất cả các thuộc tính từ đối tượng mục sẽ được đặt trong thành phần con.

3.It có thể được sử dụng theo cách tiêu chuẩn như: <C title={item.title} />

Một số ví dụ làm việc: https://jsfiddle.net/maciejsikora/jtt91wL3/3/