Проверка типов свойств для функции конструктора компонента React

Если я хочу убедиться, что функция-конструктор для компонента реакции передается в качестве опоры, как я могу проверить это с помощью модуля PropTypes?

Например:

// Child Components
class MyComponent extends React.Component {}
const MyComponent2 = (props) => null; // stateless react component

// Container
class Container extends React.Component {}
Container.propTypes = { child: /*validator*/ }

// creating container class with MyComponent
<Container child={MyComponent}/> // validation succeeds

// creating container class with MyComponent2
<Container child={MyComponent2}/> // validation succeeds

// creating container class with random function
const func = function add(x,y) { return x+y; }
<Container child={func}/> // validation fails

Возможно ли что-то подобное, учитывая, что компоненты без состояния - это просто функции без явной ссылки на React.Component?

Примечание. Я не хочу передавать компонент реакции в Container (это можно проверить с помощью PropTypes.element). Я хочу передать конструктор для такого компонента.


reactjs javascript react-proptypes ecmascript-6
person sookie    schedule 14.02.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Согласно DOC :

Любая функция является допустимым компонентом React, если она принимает единственный аргумент объекта «props» (который обозначает свойства) с данными и возвращает элемент React. Мы называем такие компоненты «функциональными», потому что они буквально являются функциями JavaScript.

Но в вашем случае функция не возвращает элемент React, а возвращает сумму двух чисел.

Один из способов решения проблемы: оберните тег (x+y) на p, например:

const func = function add(x,y) { return <p>{ x+y }</p>; }

См. В основном, JSX является синтаксическим сахаром для:

React.createElement(component, props, ...children).

Поэтому, когда мы пишем JSX, он соответствует React.createElement.

Обновление:

Вы можете использовать child: PropTypes.element для Proptypes проверки для элемента React. Если дочерний элемент получит какое-либо значение, кроме элемента реакции, он выдаст предупреждение.

Container.propTypes = {
   child: PropTypes.element
}
person Mayank Shukla    schedule 14.02.2018
comment
Я понял, что функция add (), не являющаяся настоящим компонентом реакции без сохранения состояния, должна не пройти проверку propType в компоненте Container, в то время как два моих компонента реакции не должны. Это то, чего я пытаюсь достичь. Я проясню это в вопросе - person sookie; 14.02.2018
comment
ой, хорошо понял, проверьте раздел обновлений. Думаю, это решит проблему. Сообщите мне, если это не поможет решить вашу проблему :) - person Mayank Shukla; 14.02.2018
comment
Я считаю, что PropTypes.element проверяет только предварительно созданный компонент реакции (e, g <List/>). Я пытаюсь передать функцию конструктора для такого компонента реакции, который затем контейнер может использовать для создания этого элемента. Как вы можете видеть в моем примере кода, я не создаю экземпляр MyComponent. Вместо этого я просто передаю конструктор как опору - person sookie; 14.02.2018