ReactJS: условный рендеринг с использованием Enums - PullRequest
Новая
       27

ReactJS: условный рендеринг с использованием Enums

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

Я немного новичок в React, и я практиковался в создании приложения с использованием метода рендеринга перечислений, указанного в этой статье .

Тем не менее, я пытаюсь применить его немного иначе, чем говорится в статье, более конкретно, использовать его для условной визуализации всего моего веб-сайта, за исключением <Nav /> на основе состояния lastLinkClicked. У меня есть разные классы страниц для каждого условия, перечисленные в объекте WEB_PAGES.

Возможно, я неправильно понимаю этот метод, поскольку у меня нет большого опыта работы с перечислениями, но мои страницы отображаются неправильно. Вот мой код: 

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

    this.state = {
      x: ...
      y: ...
      z: ...
      lastClickedLink: 'home' //changes to 'new', 'settings', etc. using another function not listed here
    }
  }


  render() {
    function onLinkClick(link) {
      const WEB_PAGES = {
        home: <Home
                x={this.state.x}
              />,
        new: <NewPost />,
        settings: <Settings />,
        signup: <SignUp />,
        login: <Login />
      };
      return (
        <div>
          {WEB_PAGES.link}
        </div>
      );
    }

    return (
      <div>
        <Nav
          y={this.state.y}
          z={this.state.z}
        />
      {onLinkClick(this.state.lastClickedLink)}
    </div>
    );
  }
}

export default App;

Для краткости я удалил некоторый код. Ошибка, которую я получаю с этой настройкой - TypeError: Cannot read property 'state' of undefined для дома под объектом WEB_PAGES.

Сначала я думал, что this указывает на объект WEB_PAGES, но изменение this на App показало, что state тоже не определено. Я не совсем уверен, что делать в этот момент.

Способ условного рендеринга перечислений вообще выполним в этом масштабе? И если нет, какой другой метод будет наиболее идеальным для этой ситуации? Большое спасибо!

Ответы [ 2 ]

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

используйте {WEB_PAGES[link]}, когда вы пытаетесь использовать ., оно не будет работать

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

В javascript, когда вы создаете функцию, используя ключевое слово function, она создает свою собственную новую область видимости, а также создает объект по умолчанию this. Поэтому, пока вы пытаетесь получить доступ к this.state.x, он не будет указывать свойство внутри функции. Становится this.undefined.x. так что выдает ошибку.

Принимая во внимание, что функция стрелки {(() => {})} не создает этот объект, но создает внутреннюю область.

попробуйте следующий метод рендеринга в вашем коде: 

render() {
    return (
    <div>
        <Nav
        y={this.state.y}
        z={this.state.z}
        />
        {((link) => {
            const WEB_PAGES = {
            home: <Home
                    x={this.state.x}
                />,
            new: <NewPost />,
            settings: <Settings />,
            signup: <SignUp />,
            login: <Login />
            };
            return (
                <div>
                {WEB_PAGES[link]}
                </div>
            );
        })(this.state.lastClickedLink)}
    </div>
    );
}
...