ReactJS изменить видимость кнопки на основе дочернего компонента - PullRequest
Новая
       24

ReactJS изменить видимость кнопки на основе дочернего компонента

0 голосов
/ 14 мая 2018

У меня есть проект в ReactJS, в котором у меня есть 3 типа разных представлений для отображения данных.Для этого у меня есть 3 разных компонента.

У меня есть один родительский компонент, в котором у меня есть одна кнопка с именем Rotate и три варианта с двумя представлениями изменения.

Мое требование - мне нужно установить видимость Rotateкнопка, основанная на типах представлений, таких как ViewType1 кнопка поворота должна быть видимой, а для других типов представлений кнопка поворота должна быть скрыта.

Ниже мой код:

Родительский компонент 

class ParentView extends Component {
  constructor(props) {
    super(props);

    this.state = {
       isViewType1: true
    };
    this.setRotateButtonVisibility = this.setRotateButtonVisibility.bind(this);
}
setRotateButtonVisibility(isType1) {
   this.setState({isViewType1 : isType1});
}
render() {
   return(
     {this.state.isViewType1 && (
        <button id="btnRotate" className="btn btn-default">Rotate</button>)
     }
   <Switch>
          <Route
            exact
            path="/project/:projectID"
            render={() => (
            <Viewtype1/>
            )}
          />

          <Route
            exact
            path="/project/:projectID/ukeyview"
            render={() => (
              <Viewtype2/>
            )}
          />
          <Route
            exact
            path="/project/:projectID/proxystructureview"
            render={() => (
              <Viewtype3/>
            )}
          />

     </Switch>
 )}

Итак, как вызвать функцию setRotateButtonVisibility () на основе типов представлений?

ИЛИ

Как установить состояние на основе типов представлений?

Я пробовал callBackFunc издочерний компонент, но он не позволяет изменять состояние.

Я также попробовал следующий код: 

<Route 
   exact
   path="/project/:view
   {...this.setRotateButtonVisibility(false)}
   render={() => (
     <Viewtype3/>
   )}
/>

, но ничего не работает должным образом.

1 Ответ

0 голосов
/ 14 мая 2018

Вы можете передать функцию дочернему элементу в методе render() метода Route. 

<Route 
   exact
   path="/project/:projectId
   render={() => (
     <Viewtype1 setRotateButtonVisibility={(isType1) => this.setRotateButtonVisibility(isType1)} />
   )}
 />

Это будет означать, что метод доступен внутри дочернего компонента реакции, используя реквизиты: this.props.setRotateVisibility(false)

Вы должны использовать определения имен компонентов с большой буквы.Поэтому используйте Viewtype1, а не viewtype1, иначе React будет считать, что это HTML-тег, а не компонент.Смотрите этот пост: Имена компонентов ReactJS должны начинаться с заглавных букв?

...