Слияние реквизита с HigherOrderComponents

Question

Я смотрю на https://github.com/mui-org/material-ui/blob/1052126cd08f19a04543d829a29f9c30e218a330/docs/src/pages/styles/basics/AdaptingHOC.js#L27

Я хочу сделать для проекта Gatsby что-то вроде этого:

export default withStyles(styles)(HigherOrderLayout)

Проблема, с которой я сталкиваюсь, заключается в том, что компонент нуждается впара других реквизитов.

Layout.propTypes = {
  classes: PropTypes.object.isRequired,
  title: PropTypes.object.isRequired,
  children: PropTypes.array,
}

Я не уверен, как предоставить эти другие реквизиты, и я сталкиваюсь со следующей ошибкой:

Объекты недопустимы как дочерние элементы React(найдено: объект с ключами {title}).Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.

Я полный React n00b, поэтому не могу разобраться в справочных страницах.Эти примеры слишком просты, и я не могу найти ни одного примера, который бы достиг того, чего я хочу достичь.

Любые предложения с благодарностью.

Answer 1

• Проблема заключалась в рендеринге нескольких элементов в методе рендеринга, вместо этого вы должны обернуть его в один.

• Вы также можете использовать его в один узел DOM.

Видение объектов недопустимо, так как дочерняя ошибка React может означать, что несколько разных вещей работают неправильно. Например, это может быть связано с тем, что элементы, отображаемые в элементе JSX, являются объектами, а не примитивами (поэтому убедитесь, что вы не передаете объект там, где ожидается примитив).