Question

当前，我有以下

methodName = () => {
  const {
    collectionOfComponents
    ...
    ...
  } = this.props;

  return (
    <Wrapper1>
      {collectionOfComponents.map((oneComponent, index) => (
        <Wrapper2
          ..props
        >
          {oneComponent.component}
        </Wrapper2>
      )}
    </Wrapper1>
  );
};

对于collectionOfComponents，我要传递以下内容

collectionOfComponents={[
<ComponentOne prop1... prop2... />,
<ComponentOne prop1... prop2... />,
<ComponentTwo prop1... prop2... />
]}

有没有一种方法可以识别何时传递了ComponentTwo，以便可以执行其他渲染。我不确定该怎么做

编辑抱歉，应该明确一点，但是我不想改变地图中的render方法，我想寻找一个单独的函数来首先检查数组中是否componentTwo是否存在，然后（也许）使用第三级来调用两个方法之一，这将是两个不同的返回方法。然后，我将在render方法中调用该函数

Answer 1

使用组件时，React将创建一个Element。每个元素都有一个type属性。类型是component elements的函数类，或者是DOM elements的字符串（“按钮”）。

要查找创建元素的组件，请将元素的类型与创建元素的类的功能进行比较：

const ComponentOne = () => 1;
const ComponentTwo = () => 2;
class ComponentThree extends React.Component {
  render() {
    return 3;
  }
}

const Wrapper = ({ children }) => (
  <div>
  {React.Children.map(children, (El) => {
    switch(El.type) {
      case ComponentOne:
        return <div className="red">{El}</div>;
      case ComponentTwo:
        return <div className="blue">{El}</div>;
      case ComponentThree:
        return <div className="green">{El}</div>;
    }
    
    return null;
  })}
  </div>
);

ReactDOM.render(
  <Wrapper>
    <ComponentOne />
    <ComponentOne />
    <ComponentTwo />
    <ComponentThree />
  </Wrapper>,
  demo
);

.red { background: red; }
.blue { background: blue; }
.green { background: green; }

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>

Answer 2

const isComponentTwo = collectionOfComponents.some(component => component.type.displayName.includes('ComponentTwo'));

如果collectionOfComponents中的至少一个组件为ComponentTwo，则以上内容将返回true。

但是不建议这样做。永远不要使用displayName或type进行生产。这是因为，例如，在缩小期间，displayName和type会发生变化，因此您期望的逻辑不会像您期望的那样发生。

following指出：

displayName字符串用于调试消息。通常，您不需要显式设置它，因为它是从定义组件的函数或类的名称推断出来的。如果要显示其他名称以进行调试或创建高阶组件时，则可能需要显式设置

更好的解决方案是在组件中添加某种flagProp。例如

decideWhatToDo = () => {
  const { flagPropName } = this.props;
  return flagPropName
    ? this.methodOne()
    : this.methodTwo();
 }

然后，您可以在这两种方法中确定componentTwo存在或不存在时要做什么

Answer 3

使用indexOf检入数组

collectionOfComponents.indexOf('ComponentTwo') !== -1 // found

Answer 4

也许您可以使用这种方式或类似方式？

    <Wrapper1>
      {collectionOfComponents.map((oneComponent, index) => (
        <Wrapper2
          ..props
        >
          {oneComponent.component instanceof ComponentTwo ? renderWasYouWant : otherRender }
        </Wrapper2>
      )
    </Wrapper1>

如何从对象数组中识别组件名称

4 个答案: