Блог

Главная - Вопросы по программированию - Перенос компонентов React в div, портящий их

Перенос компонентов React в div, портящий их

#javascript #html #reactjs #babeljs

#javascript #HTML #reactjs #babeljs

Вопрос:

У меня есть такая игра: Игра

Я использую react-contexify для создания пользовательского contextmenu в React, Вот мой код перед:

 <MenuProvider key="0">
  <Message
    className="ChatMessage"
    style={{ width: isMobile() ? "60%" : "40%", backgroundColor: "#424751" }}
  >
    <h3 className="Username">{this.props.username}</h3>
    :amp;nbsp;
    <p className={Boolean(this.props.rainbow) ? "RainbowMessage" : "Message"}>
      {this.props.children}
    </p>
  </Message>

  <Menu>
    <Item>Lorem</Item>
    <Item>Ipsum</Item>
    <Separator />
    <Item disabled>Dolor</Item>
    <Separator />
    <Submenu label="Foobar">
      <Item>Foo</Item>
      <Item>Bar</Item>
    </Submenu>
  </Menu>
</MenuProvider>

И мой код после:

 <MenuProvider key="0">
                        <Message className="ChatMessage" style={{"width": isMobile() ? "60%" : "40%","backgroundColor": "#424751"}}>
                            <h3 className="Username">
                                {this.props.username}
                            </h3>
                            :amp;nbsp;
                            <p className={Boolean(this.props.rainbow) ? "RainbowMessage" : "Message"}>
                                {this.props.children}
                            </p>
                        </Message>

                        <Menu>
                            <Item>Lorem</Item>
                            <Item>Ipsum</Item>
                            <Separator />
                            <Item disabled>Dolor</Item>
                            <Separator />
                            <Submenu label="Foobar">
                            <Item>Foo</Item>
                            <Item>Bar</Item>
                            </Submenu>
                        </Menu>
                    </MenuProvider>

Но этот код приводит к этому:
mygameafter

Это то же самое, что обернуть его в div… Но почему? Что не так? Спасибо

Комментарии:

1. Я не уверен, что это вызывает проблему, но я почти уверен, что единственное фактическое различие между вашими двумя примерами кода, помимо форматирования, заключается в том, что второй имеет "width" и "backgroundColor" , заключенные в кавычки.

2. Нет, проблема не в этом :/

3. тогда где-то еще в вашем коде должна быть разница

4. их нет, с помощью devtools я проверил div, который переносит все компоненты react, его класс react-contextmenu-wrapper , и когда я удаляю его, все возвращается к нормальной жизни … что я могу сделать?

5. возможно, существует некоторый конфликт между стилями, применяемыми react-contextmenu-wrapper и вашим ChatMessage классом. Вы пробовали удалять свои стили, чтобы посмотреть, что библиотека делает сама по себе?