web-dev-qa-db-fra.com

Définir les accessoires du composant de manière dynamique

Je dois définir les accessoires du composant après son stockage dans une variable, voici un pseudo-code:

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

        )
      })
    )
  }

Inside return Je lance une boucle dans laquelle je dois définir des accessoires pour le composant stocké dans une variable .... Comment définir des accessoires pour ce composant que j'ai précédemment stocké dans une variable? 

reactjsreact-jsxjsx
9
bukowski

La méthode appropriée consiste à utiliser la méthode cloneElement de React ( https://facebook.github.io/react/docs/react-api.html#cloneelement ) . Vous pouvez obtenir ce que vous voulez en:

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

Cela peut être fait en assignant non pas jsx mais une référence de composant, puis en utilisant jsx en boucle avec using de composant de variable. Vérifiez mes modifications de code.

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

    )
  })
)
}

Choses les plus importantes:

1 .C=A; nous avons mis sur la variable C référence à composant cible

2 .<C {...item} /> toutes les propriétés de l'objet item seront définies dans le composant enfant.

3.Il peut être utilisé de manière standard comme: <C title={item.title} />

Quelques exemples de travail: https://jsfiddle.net/maciejsikora/jtt91wL3/3/

0
Maciej Sikora

Vous pouvez déplacer la switch à l'intérieur de la map(). J'espère que cela t'aides!

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>

Vous n'avez pas besoin d'ajouter un cas default car React ignorera undefined, qui sera renvoyé à map en cas d'échec de la casse du commutateur.

0
Pranesh Ravi