Как раскидать по компонентам REACT?

Question

[mikor]

Субствено есть компонент Todos

render() {
  const { data: { loading, error, todos } } = this.props;
  if (loading) {
    return <p>Loading...</p>;
  } else if (error) {
    return <p>Error!</p>;
  } else {
    return (
      <ul>
        {todos.map(({ id, text }) => (
          <li key={id}>{text}</li>
        ))}
      </ul>
    );
  }
}

Как сделать так что бы было 3 компонента Error, Loading, Todos, при том что бы Error и Loading "пропадали" как только их статус меняется в false (ну появлялись при true соответственно).

P.S. Это нужно сделать так как будет много аналогичных компонентов и не хочется дублировать код Error и Loading....

Comments

[kulaeff]

Товарищ, проследуйте сюда https://facebook.github.io/react/docs/components-a...

[mikor]

kulaeff, я видимо слишком просто описал проблему, если вы прочитаете ветку под первым ответом, задача не будет на столько простой

Answer 1

[Роман Александрович]

const Error=()=>{
<div><p>Error!</p></div>
}
const Loading=()=>{
<div><p>Loading...</p></div>
}
const Todos=()=>{
<div><ul>
        {this.props.todos.map(({ id, text }) => (
          <li key={id}>{text}</li>
        ))}
      </ul></div>
}
render() {
  const { data: { loading, error, todos } } = this.props;
  if (loading) {
   <Loading>
  } else if (error) {
   <Error> 
  } else {
    return (
      <Todos todos={todos }>
    );
  }
}

Comments

[mikor]

В том то и дело что в каждом компоненте аналогичном Todos, надо будет писать это условие, чего не хочется...

[Роман Александрович]

mikor, был бы у вас рэндер на 200 строк я бы еще задумался о том что будет повторение проверок а здесь на 20 строк рэндер.

[mikor]

Роман Александрович, какая разница на сколько строк, у меня этих компонентов (аналогичных) будет несколько десятков, и в каждом это условие? а если добавиться что то еще? во все 50 штук добавлять? при всем уважении, вы или не правы или не так меня поняли

[Роман Александрович]

mikor, наверно не правильно понял а что вам не нравится в компоненте Todos?

[mikor]

Роман Александрович, Компонент Todos это пример из GraphQL, в действительности есть очень много компонентов в которых осуществляется GraphQL запрос, и по мере получения результата от сервера, меняются статусы Errors/Loading. Если я в каждом компоненте я буду писать

if (loading) {
   <Loading>
  } else if (error) {
   <Error> 
  } else {
    return (код компонента);
  }

представляете что будет? вот мне и нужно сделать что то в духе

export default (props) => {
  if (props.data.loading) {
    return <div>Loading</div>
  }
  return <div />
}

и вот этот код (видимо) нужно вызывать где то в Layout и аналогично error, т.е. если там true то выводим блок иначе пусто. Я просто не совсем представляю как все вместе это должно выглядеть... с учетом того что статус loading меняется

[Роман Александрович]

mikor, Я кажется уже такое проделывал

const Error=()=>{
<div><p>Error!</p></div>
}
const Loading=()=>{
<div><p>Loading...</p></div>
}

export const checking()=>{
render() {
  const { data: { loading, error} } = this.props;
  if (loading) {
   <Loading>
  } else if (error) {
   <Error> 
  } else {
    return (
     {this.props.children}
    );
  }
}}



const Todos=()=>{
<div><ul>
        {this.props.todos.map(({ id, text }) => (
          <li key={id}>{text}</li>
        ))}
      </ul></div>
}
<Checking loading={true} error={false}><Todos></Cheking>

Answer 2

[Антон]

На моем проекте я сделал такой велосипед, не доделан случай, когда не требуется заменять собой весь компонент, стили измените под себя:

import PropTypes from 'prop-types';
import csx from 'classnames';

export const MessageContainer = ({ theme, children }) => (
	<div className={csx('root', theme)}>
		{/* language=SCSS */}
		<style jsx>{`
			.root {
				font-weight: 500;
				display: flex;
				flex: 1;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				padding: 24px;
			}
			.error {
				color: var(--error-color);
			}
			.loading {
				color: var(--accent-color);
			}
			.empty {
				color: #bbbbbb;
			}
		`}</style>
		{children}
	</div>
);

MessageContainer.propTypes = {
	theme: PropTypes.oneOf(['loading', 'empty', 'error']).isRequired,
	children: PropTypes.node.isRequired,
};

export default function withQueryStatus({ emptyText = 'Nothing found', replaceComponent = true, resultPath }) {
	if (!replaceComponent) {
		throw new Error('Not implemented');
	}

	return (ComposedComponent) => {
		const WithQueryStatus = (props) => {
			const data = props.data;
			if (!data) {
				return null;
			}

			if (data.error) {
				return <MessageContainer theme='error'>{data.error.message}</MessageContainer>;
			}

			if (data.loading) {
				return <MessageContainer theme='loading'>Loading...</MessageContainer>;
			}

			if (!data[resultPath].length) {
				return <MessageContainer theme='empty'>{emptyText}</MessageContainer>;
			}

			return <ComposedComponent {...props} />;
		};

		WithQueryStatus.propTypes = {
			data: PropTypes.shape({
				[resultPath]: PropTypes.array,
				loading: PropTypes.bool,
				error: PropTypes.object,
			}),
		};

		WithQueryStatus.defaultProps = {
			data: null,
		};

		return WithQueryStatus;
	};
}

// у вас будет

export default withQueryStatus({ emptyText: 'No todos found', resultPath: 'todos' })(Todos),