Question

我正在尝试根据传递给<ParentComponent/>的道具值附加各种子组件<ChildComponen1/>, <ChildComponen3/>, <ChildComponen3/>来动态设置组件<ParentComponent/>的内容。父组件是一个列表，子组件是具有不同内容的列表项（css，html）

下面我详细介绍了一种我认为适用于这种情况的方法但是如果你有另一种（更有效的）方法来实现动态填充具有各种不同子组件的父组件的指定目标，那么你的洞察力将是非常感谢。谢谢

class ParentComponent extends React.Component{
    render(){
       return(

            <ComponentSwitch type="ChildComponen1"/>  
            <ComponentSwitch type="ChildComponen2"/>
      )
    }
}


class ComponentSwitch extends React.Component{
    render(){
          return(
            //How would I most effectively create a switch here?
          )
    }
}

...child components omitted for brevity

实现此功能的最有效和最有效的方法是什么？感谢

Answer 1

只需写一些Javascript ...
这里有许多可能性，例如：

class ComponentSwitch extends React.Component {
  renderA() {
    return (
      <div>
        ... lot of child components here
      </div>
    );
  }

  render() {
    if (this.props.a) {
      return this.renderA();
    }

    return <B />;
  }
}

或使用switch语句并返回组件进行渲染。无论你做什么

class ComponentSwitch extends React.Component {
  render() {
    switch (this.props.component) {
      case 'a':
        return <A />;

      case 'b':
        return <B />;

      default:
        return <C />;
    }
  }
}

做任何JS允许你做的事情：）

Answer 2

我会回答我理解的问题，我不确定这是你真正的问题，但现在就是这样。

首先将您的type参数设为您想要表示的真实Class。

import ChildComponent1 from './ChildComponent1.jsx';
import ChildComponent2 from './ChildComponent2.jsx';

class ParentComponent extends React.Component{
  render(){
     return(
        <ComponentSwitch type={ChildComponen1} name='John'/>  
        <ComponentSwitch type={ChildComponen2} name='Doe'/>
      )
  }
}

然后从type中提取props，并将props的其余部分传递给孩子Component。

class ComponentSwitch extends React.Component{
    render(){
      const {
        type: Component,
        ...props,
      } = this.props;

      // props will now have 'name' and other props ready for the child component
      return <Component {...props} />;
    }
}

React：如何动态地将不同类型的子组件附加到父组件中？

2 个答案: