реагировать - Как открыть показать больше на компонент функции? - PullRequest
Новая
       10

реагировать - Как открыть показать больше на компонент функции?

0 голосов
/ 03 мая 2019

У меня есть функциональный компонент 

const text = ({data}) => {
    return (
        <p onClick={()=> render more?}>info</p>
    )}

const more = ({data}) => {
    return (<p>..........</p>)
}

Можно ли отобразить больше компонентов в событии onClick?

1 Ответ

2 голосов
/ 03 мая 2019

Конечно, вам понадобится переменная состояния. Используйте состояние, чтобы определить, следует ли отображать больше или нет, а затем установите состояние, когда происходит щелчок. Если у вас есть реакция 16.8 или новее, вы можете сделать это в функциональном компоненте с крючками: 

import { useState } from 'react';

const MyComponent = ({data}) => {
  const [showMore, setShowMore] = useState(false);
  return (
    <div>
      <p onClick={() => setShowMore(true)}>info</p>
      {showMore && <More data={data} />}
    </div>
  )}
}

До версии 16.8 вам необходимо использовать компонент класса. 

class MyComponent extends React.Component {
  state = {
    showMore: false,
  }

  render() {
    return (
      <div>
        <p onClick={() => this.setState({ showMore: true})}>info</p>
        {this.state.showMore && <More data={this.props.data} />}
      </div>
    )}
  }
}
...