Обзор с использованием реквизитов с функциональными компонентами без состояния

• Мы передали реквизиты функциональным компонентам без сохранения состояния. Эти компоненты действуют как чистые функции. Они принимают реквизит в качестве ввода и возвращают один и тот же представление каждый раз, когда они передаются одинаково.

1. Функциональный компонент без состояния — это любая функция, которую вы пишете, которая принимает реквизит и возвращает JSX.
2. С другой стороны, компонент без состояния — это класс, который расширяет React. Компонент, но не использует внутреннее состояние (рассматривается в следующем посте).
3. Состояние компонента — это компонент класса, который поддерживает свое собственное внутреннее состояние. Вы можете увидеть государственные компоненты, называемые просто компонентами или компонентами реагирования.

• Freecodecamp теперь показывает нам редактор кода, что это Лагерь составная часть это делает а Кемпер компонент в детстве. Они хотят, чтобы мы определили Кемпер компонент и назначьте его по умолчанию реквизиты {имя: 'Camperbot'} Анкет Мы можем представить любой код, который мы хотим, но он должен иметь элемент P, который включает только значение имени, которое передается как опора. Мы должны определить Proptypes на компоненте Camper, чтобы потребовать, чтобы имя было предоставлено в качестве опоры, и убедиться, что он имеет тип строки.

class CampSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        
      
    );
  }
};
{/* Change code below this line*/}

Отвечать:

{/* Change code below this line*/}
const Camper = (props) => {
  return 
{props.name}
}
Camper.defaultProps = {name: 'CamperBot'}
Camper.propTypes = { name: PropTypes.string.isRequired}

Ларсон, Q., 2019. Обзор с использованием реквизитов с функциональными компонентами без состояния. [онлайн] freecodecamp.org. Доступно по адресу: https://www.freecodecamp.org/learn/front-end-development-libraries/react/add-comments-in-jsx

Оригинал: «https://dev.to/rthefounding/review-using-props-with-stateless-functional-components-9ca»