1

Есть такой класс:

class SearchBar extends React.Component {
render() {
    return (
        <Form >
            <Input placeholder='Search' />
            <Button type='button' onClick={onFetch}>GO</Button>
        </Form>
    )
  }
}

можно ли добавить параметр, как здесь:

const SearchBar = ({onFetch}) => {
return (
    <Form >
        <Input placeholder='Search' />
        <Button type='button' onClick={onFetch}>GO</Button>
    </Form>
  )
}

const mapDispatchToProps = (dispatch) => {
return {
    onFetch: () =>
        dispatch({
            type: 'IMAGE_FETCH_REQUESTED'
         })
    }
}

export default connect(
    null,
    mapDispatchToProps
)(SearchBar);

Или нужно будет обернуть render?

2
  • что такое onFetch и как он передается в SearchBar?
    – Grundy
    10 июл 2018 в 13:50
  • @Grundy функция, через connect из redux.
    – Alex Park
    10 июл 2018 в 13:52

1 ответ 1

1

В функциональные компоненты в качестве параметра передается props.

Поэтому первый пример можно переписать как:

const SearchBar = (props) => {
  return (
    <Form >
        <Input placeholder='Search' />
        <Button type='button' onClick={props.onFetch}>GO</Button>
    </Form>
  )
}

Далее можно воспользоваться советом из документации: конвертация функции в класс

Важен четвертый шаг: заменить props на this.props

В итоге получится:

class SearchBar extends React.Component {
  render() {
    return (
        <Form >
            <Input placeholder='Search' />
            <Button type='button' onClick={this.props.onFetch}>GO</Button>
        </Form>
    )
  }
}
1
  • Спасибо,то что нужно)
    – Alex Park
    10 июл 2018 в 13:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.