React: Обязательные реквизиты, предоставленные с cloneElement, по-прежнему отображают предупреждение в консоли

Созданный на 27 июл. 2015 · 3Комментарии · Источник: facebook/react

Я сделал пример, чтобы его было легче понять, но в основном в консоли отображается предупреждение из-за «отсутствия необходимых реквизитов».

Реквизиты передаются элементу с React.cloneElement поэтому я не ожидал получить предупреждение об отсутствующих реквизитах. Я понимаю, что это может быть крайний случай ...

https://jsfiddle.net/kdsvgbzu/1/

<A name="name" value="value">
    <B></B>
</A>

class A extends React.Component {
    render() {
        return (
            <div>
                {React.Children.map(this.props.children, function(child) {
                    return React.cloneElement(child, {
                        name: this.props.name,
                        value: this.props.value
                    });
                }, this)}
            </div>
        );
    }
}

A.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

class B extends React.Component {
    render() {
        return <span>{this.props.name} : {this.props.value}</span>;
    }
}

B.propTypes = {
    name: PropTypes.string.isRequired,
    value: PropTypes.string.isRequired
};

Источник

tleunen

Самый полезный комментарий

Я не знаю, каков был ваш реальный вариант использования @tleunen , но я наткнулся на эту проблему при реализации многоразового компонента, который отвечал за передачу реквизита своим

ReactDOM.render(
   <NumberSelector>
    <ComponentRequiringTheNumber />
  </NumberSelector>
)

В конце концов, я решил проблему и нашел более элегантное решение:

ReactDOM.render(
   <NumberSelector>
    {({number}) => <ComponentRequiringTheNumber number={number} />}
  </NumberSelector>
)

Мне это нравится намного больше, поскольку зависимость ComponentRequiringTheNumber очевидна, а роль NumberSelector становится очевидной. Таким образом, свойства вложенного компонента оцениваются только тогда, когда это необходимо.

Применяется к вашей скрипке: https://jsfiddle.net/ap1e9rk3/1/

micaste 1 мар. 2017

👍15 🎉3

Все 3 Комментарий

Это сделано намеренно; проверка свойств во время создания элемента приводит к более полезным ошибкам. Он также более точно соответствует поведению систем статического типа, таких как Flow. На данный момент лучше всего просто пометить эти реквизиты как необязательные. Мы также можем представить в будущем функцию под названием context, которая предоставит другой поддерживаемый способ передачи свойств от родителя, такого как A, к дочернему элементу, например B.

sophiebits 27 июл. 2015

👍8 😕7 ❤3

Это то, о чем я думал. Спасибо @spicyj

tleunen 27 июл. 2015

ReactDOM.render(
   <NumberSelector>
    <ComponentRequiringTheNumber />
  </NumberSelector>
)

В конце концов, я решил проблему и нашел более элегантное решение:

ReactDOM.render(
   <NumberSelector>
    {({number}) => <ComponentRequiringTheNumber number={number} />}
  </NumberSelector>
)

Применяется к вашей скрипке: https://jsfiddle.net/ap1e9rk3/1/

micaste 1 мар. 2017

👍15 🎉3

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

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

UnbearableBear · 3Комментарии

Отрисовка нескольких компонентов без элемента оболочки

Prinzhorn · 3Комментарии

React не работает с тегами script.

trusktr · 3Комментарии

Вход onChange не запускается каждый раз в IE11, если используется e.preventDefault ()

jmullo · 3Комментарии

Предупреждение: «Встречены двое детей с одним и тем же ключом»

kocokolo · 3Комментарии