javascript - 在运行时动态包装随机数 React 组件

Question

如果我说了以下简单的组件:

const CompOne = (props) => {
  return (
    <div className="compOne">
      {props.children}
    </div>
  );
};

const CompTwo = (props) => {
  return (
    <div className="compTwo">
      {props.children}
    </div>
  );
};

const CompThree = (props) => {
  return (
    <div className="compThree">
      {props.content}
    </div>
  );
};

现在在运行时，在发出 AJAX 请求后，客户端会收到一些信息，这些信息给出了组件需要相互包装的顺序。该 AJAX 请求的结果如下所示:

let renderMap = [
  { component: CompOne, props: {} },
  { component: CompTwo, props: {} },
  { component: CompThree, props: { content: "hi there" } }
];

因此组合应该通过遍历数组并将一个组件组合到下一个组件来流动。例如:CompOne(CompTwo(CompThree)))

当我尝试创建一个包装 HOC 来解决这个问题时需要注意两件重要的事情:

编辑:我忘记在原帖中提及的重要细节

1) 包裹的组件数量不会一致。有时可能是 3 个，但有时需要多达 4、5、6 个组件相互包装

2) 每次顺序可能不同

<CompOne>
  <CompTwo>
    <CompThree content="hi there">
    </CompThree>
  </CompTwo>
</CompOne>

所以我生成的 HTML 将是:

<div className="compOne">
  <div className="compTwo">
    <div className="compThree">
      hi there
    </div>
  </div>
</div>

我已经尝试了各种方法，但一旦我开始绕过两个组件，我就无法让它工作。这是我什至可以在 React 中做的事情吗？

Answer 1

喜欢Arup Rakshit的链接发表在评论中显示，您可以使用存储在变量中的组件 - 使用 JSX - 只要它们是大写的:

// in render()
const MyComp = props.someVariableContainingAComponent;
return <MyComp />;

考虑到这一点，解决您的问题的一种方法是遍历所有组件，从内部组件开始，然后将下一个组件用作前一个组件的包装器。给定测试数据 renderMap 的形状，并使用 Array.protype.reduce 进行迭代，它可能看起来像这样:

renderComponents(renderMap) {
  const Component = renderMap
   .reverse()
   .reduce( (ComponentSoFar, {component, props}) => {
     const Outer = component;
     return () => (<Outer {...props} ><ComponentSoFar /></Outer>);
   }, props => null ); // initial value, just a "blank" component
 return ( <Component /> );
}

我提供了一个演示，展示了如何使用这种方法处理不同数量的组件和不同的嵌套顺序。

const CompOne = (props) => (
    <div className="comp compOne"><p>One:</p>{ props.content || props.children } </div>);
const CompTwo = (props) => (
	<div className="comp compTwo"><p>Two:</p> { props.content || props.children }</div>);
const CompThree = (props) => (
	<div className="comp compThree"><p>Three:</p> { props.content || props.children }</div>);
const CompFour = (props) => (
	<div className="comp compFour"><p>Four:</p> { props.content || props.children }</div>);
const CompFive = (props) => (
	<div className="comp compFive"><p>Five:</p> { props.content || props.children }</div>);

const renderMap1 = [
  { component: CompOne, props: {} },
  { component: CompTwo, props: {} },
  { component: CompThree, props: {} },
  { component: CompFour, props: {} },
  { component: CompFive, props: { content: "hi there" } }
];
const renderMap2 = [].concat(renderMap1.slice(1,4).reverse(), renderMap1.slice(4))
const renderMap3 = renderMap2.slice(1);

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  
  renderComponents(renderMap) {
     const Component = renderMap
      .reverse()
      .reduce( (ComponentSoFar, {component, props}) => {
        const Outer = component;
        return () => (<Outer {...props} ><ComponentSoFar /></Outer>);
      }, props => null ); // initial value, just a "blank" component
    return ( <Component /> );
  }
  
  render() {
    return ( <div> 
      { this.renderComponents(renderMap1) } 
      { this.renderComponents(renderMap2) } 
      { this.renderComponents(renderMap3) } 
    </div> );
  }
};
ReactDOM.render(<App />, document.getElementById('root'));

.comp {
  border: 5px solid green;
  padding: 5px;
  margin: 5px;
  display: inline-block;
}
.compOne { border-color: red;}
.compTwo { border-color: green;}
.compThree { border-color: blue;}
.compFour { border-color: black;}
.compFive { border-color: teal;}

<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="root"></div>