React - Передача реквизита детям

Question

Я пытаюсь сделать условное выражение. Однако у меня возникают проблемы с прохождением реквизита.

const App = ({children, onConfirm}) => {
{modalActive && renderModal(() => setModalActive(false), () => { onConfirmAbort(); setModalActive(false); })}

 if (this.props.Enabled("True")) {
    return (
        <h1>hello world </h1>
    );
  }
  return (
    <div>
        {children}
    </div>
  );
};

Это приведет к ошибке:

TypeError: Cannot read property 'props' of undefined.  

Я не уверен, как передать реквизиты, если это функция с дети.

Answer 1

Определяя свой App компонент, подобный этому

const App = ({children, onConfirm}) => {
    // ...
}

, вы деструктурируете аргумент, который будет передан вашему Component, как обычно, этот аргумент называется props. Делая это, вы больше не имеете доступа к property с именем props, а только к свойствам, которые вы взяли из свойства, которое деструктурируется в этом случае props.

И, с другой стороны, как вы определяете свой компонент как Functional component. У вас нет доступа к свойствам с помощью ключевого слова this.

Итак, если вы хотите получить доступ к свойству Enable, вы должны получить его из props, добавив это в список свойств, которые вы получаете из аргументов props, которые были деструктурированы следующим образом

const App = ({children, onConfirm, Enabled}) => ...

Или передавая, избегая полного разрушения и имея доступ к props вместо этого

const App = (props) => ...

Используя props, вам нужно будет добавлять к каждому свойству, переданному в ваш Component, префикс props, чтобы получить к нему доступ. вот так

props.children, props.onConfirm, props.Enabled(...)

Answer 2

Вам нужно удалить «это» и добавить «Включено» в раздел параметров функции. Причина в том, что вы не используете компонент на основе классов. В этом случае нет необходимости использовать «это». Вы уже объявили дочерние элементы и onConfirm таким же образом.

const App = ({children, onConfirm, Enabled}) => {
{modalActive && renderModal(() => setModalActive(false), () => { onConfirmAbort(); setModalActive(false); })}

 if (Enabled("True")) {
    return (
        <h1>hello world </h1>
    );
}
return (
    <div>
        {children}
    </div>
);

};