web-dev-qa-db-ja.com

コンポーネントの小道具を動的に設定する

コンポーネントの小道具を変数に保存した後、設定する必要があります。これは擬似コードです。

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内で、変数内に格納されているコンポーネントの小道具を設定する必要があるループを実行します。先ほど変数に保存したこのコンポーネントに小道具を設定する方法は？

reactjsreact-jsxjsx
14
bukowski

適切な方法は、ReactのcloneElementメソッドを使用することです（ https://facebook.github.io/react/docs/react-api.html#cloneelement ）。以下を実行することで、目的を達成できます。

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

これは、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.次のような標準的な方法で使用できます：<C title={item.title} />

いくつかの実際の例： https://jsfiddle.net/maciejsikora/jtt91wL3/3/

1
Maciej Sikora

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に返されます。

0
Pranesh Ravi