Как определить имя компонента из массива объектов - PullRequest
Новая
       5

Как определить имя компонента из массива объектов

0 голосов
/ 13 ноября 2018

В настоящее время у меня есть следующее 

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 был пройден, чтобы я мог выполнить другой рендер. Я не уверен, как это сделать

EDIT Извините, если бы это прояснилось, но я не собираюсь менять метод рендеринга на карте, я ищу отдельную функцию, чтобы сначала проверить, существует ли componentTwo в массиве в любое время, а затем (возможно, ) использовать третичный для вызова одного из двух методов, которые будут двумя различными методами возврата. Затем я вызову функцию в методе рендеринга

Ответы [ 4 ]

0 голосов
/ 13 ноября 2018 
const isComponentTwo = collectionOfComponents.some(component => component.type.displayName.includes('ComponentTwo'));

Приведенное выше вернет true, если хотя бы один компонент в collectionOfComponents равен ComponentTwo.

Однако это не рекомендуется. Использование displayName или type для производства никогда не должно использоваться. Это связано с тем, что, например, во время минимизации displayName и type изменятся, поэтому логика, которую вы ожидаете, не будет соответствовать ожидаемой.

следующие состояния:

Строка displayName используется в сообщениях отладки. Обычно вам не нужно задавать его явно, потому что он выводится из имени функции или класса, который определяет компонент. Возможно, вы захотите установить его явно, если вы хотите отобразить другое имя для целей отладки или при создании компонента более высокого порядка

Лучшим решением было бы добавить какой-то flagProp к вашему компоненту. Например 

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

В этих двух методах вы можете решить, что вы хотите сделать, если componentTwo существует или не существует

0 голосов
/ 13 ноября 2018

Когда вы используете компонент, React создает Элемент . Каждый элемент имеет свойство type. Тип является классом функции для элементов или строкой для элементов DOM ('button').

Чтобы найти компонент, который создал элемент, сравните тип элемента с функцией класса, которая его создала: 

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>
0 голосов
/ 13 ноября 2018

Может быть, вы можете использовать этот способ или Simulary ?? 

    <Wrapper1>
      {collectionOfComponents.map((oneComponent, index) => (
        <Wrapper2
          ..props
        >
          {oneComponent.component instanceof ComponentTwo ? renderWasYouWant : otherRender }
        </Wrapper2>
      )
    </Wrapper1>
0 голосов
/ 13 ноября 2018

Проверить в массиве, используя indexOf: 

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