动态设置组件的道具

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

Answer 1

您可以将 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 2

这可以通过不分配 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/

Answer 3

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

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

Answer 4

更多 Use-cases 示例 -> 对于来到这里的其他人：

一种使用所有组件及其道具动态呈现 pre-declared 数组中所有项目的方法：

const items = [{component: Home,props:{ icon: 'fa-home', title: 'Home Page'}},{...}]

<div>
    {
       items.map((item) => {
          let Child = item.component;
          return (<Child {...item.props}/>);
       });
     }
</div>

动态设置组件的道具

Set component's props dynamically

jsx

reactjs

react-jsx