Как написать компонент который будет возвращать компонент который в него положили?

Question

[vaskadogana]

ниже пример. Суть в том, что хочу компонент MayBeHidden подписать на store и в зависимости от прав пользователя возвращать содержимое или нет. Но столкнулся с тем, что:
1. компонент который ложу возвращает и принимает, значения. В случае с переменной написал {...this.props}, а тут что-то торможу
2. то, что планирую ложить внутрь довольно разного плана, от кнопки/формы до таблицы или целой страницы.

<MayBeHidden>
            <BtnAdd 
                pasword_placeholder = {'Введите пароль'} 
                name_placeholder = {'Введите имя'} 
                btnname = {'Добавить пользователя'}
                dataFromform = {this.adduser}
                kindUser = {'User'}
                defaultgroup = {this.props.login}
            >    
            </BtnAdd>  
</MayBeHidden>

Answer 1

[Александр Прозоров]

render() {
  const isHidden = false; 

  if (isHidden) return null;

  return <children.type {...children.props} additionalProp="an value" />;
}

Answer 2

[vaskadogana]

пока что решил свой вопрос по другому, но возврат содержимого вроде вот так происходит:

class SomeContextProvider extends React.Component {
  getChildContext() {
    return {some: "context"}
  }

  render() {
     return React.Children.only(this.props.children)
  }
}

спасибо Evgeniy Kvasyuk за статью https://habrahabr.ru/post/309422/

Comments

[Evgeniy Kvasyuk]

Рад помочь!

Answer 3

[Evgeniy Kvasyuk]

https://habrahabr.ru/post/309422/ - замечательная статья, после которой вы легко напишите High order component

Answer 4

[Mikhail Osher]

render() {
  return <div>{this.props.children}</div>
}

Comments

[vaskadogana]

не совсем, нужно вот так
return React.Children.only(this.props.children)

[Mikhail Osher]

vaskadogana: зависит от контекста. Если именно один элемент - да. Однако Вы сами написали "то, что планирую ложить внутрь довольно разного плана, от кнопки/формы до таблицы или целой страницы." - значит может быть несколько элементов.

[Mikhail Osher]

vaskadogana: https://facebook.github.io/react/docs/react-api.ht...

[vaskadogana]

Mikhail Osher: хм, если все это в один тег запаковано, то вроде как один элемент выходит

Answer 5

[davidnum95]

Для таких случаев правильнее использовать HOC.