Отобразить компонент реакции на странице WordPress - PullRequest
Новая
       3

Отобразить компонент реакции на странице WordPress

0 голосов
/ 26 сентября 2018

В настоящее время наш веб-сайт построен на Wordpress, и я создал компонент в React, который мы хотим условно отобразить на странице.

У меня есть компонент, созданный и связанный с Webpack для производства, но я не могу выяснить,как добавить его на наш веб-сайт и отобразить компонент на странице

edit Мне также потребуется условно отобразить компонент (отправка формы, нажатие кнопки и т. д.)

Кто-нибудь успешно это сделал?

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

В вашем проекте React добавьте файл в глобальную область (окно) следующим образом: 

window.myReactComponents = {
  myFirstComponent: () => <MyFirstComponent/>
}

После того, как это будет связано, обратитесь к файлу bundlejs на вашей нереагирующей странице.

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

window.useComponent = {
  renderMyFirstComponent : ReactDOM.render(
    window.myReactComponents.myFirstComponent(),
    document.getElementById('myReactElement')
  )
};

Вот и все!

Пример в реальном времени

Документация ReactDOM.render

0 голосов
/ 26 сентября 2018

Поскольку вы уже собрали и скомпоновали свой компонент, вам нужно сделать только три вещи:

  1. Добавить связанный JavaScript (вывод Webpack) в качестве тега скрипта на любой страницеВы хотите, чтобы компонент был включен (предпочтительно в нижней части <body>).
    Пример: <script src="wp-content/react/bundle.js"></script>

  2. Добавьте корневой элемент, с которым React будет связываться ста же страница.
    Пример: <div id="react-root"></div>

  3. В вашем файле компонента отобразите компонент в корневой элемент.
    Пример: ReactDOM.render(<Component />, document.getElementById('react-root'));

Чтобы динамически отображать и скрывать компонент React на основе чего-либо, происходящего вне файла компонента, необходимо создать способ подключения внешнего (DOM) к внутреннему (React).Самый простой способ сделать это с помощью глобальной переменной, прикрепленной к window.

. В своем компоненте React добавьте метод componentWillMount, который определяет глобальную переменную: 

componentWillMount() {
    window.showComponent = (option) => {
        // "option" should be true or false
        this.setState({ display: option });
    }
}

На основедля значения, переданного setState выше, вам необходимо добавить свойство display в состояние вашего компонента: 

constructor(props) {
    super(props);
    this.state = {
        display: false
    };
}

Теперь, чтобы компонент отображался или скрывался на основе значения this.state.display внутри render() метода: 

render() {
  if (this.state.display) {
    return (
      ...
    )
  } else {
    return null;
  }
}

Все, что осталось сделать, это использовать showComponent(true) или showComponent(false) в вашем коде, который обрабатывает форму.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...