Material-ui: [MenuItem] روابط داخل عناصر القائمة

تم إنشاؤها على ٦ يناير ٢٠١٥ · 43تعليقات · مصدر: mui-org/material-ui

مرحبًا ، كنت أنظر إلى التنفيذ الحالي لعناصر القائمة ولاحظت عدم وجود ارتباط فعلي (بمعنى ، html <a> tag). نتيجة لذلك ، على سبيل المثال ، لا يوجد رابط فعلي حتى في شريط التنقل ، وتتم إدارة عمليات الانتقال إلى صفحات أخرى عبر أحداث onclick.

أعتقد أن وجود روابط سيكون تحسينًا ، لا سيما بالنظر إلى الصفحات المعروضة من جانب الخادم.

هل تعتقد أن هذا منطقي أم أن لديك أسبابًا محددة لعدم السير في هذا الاتجاه؟

v0.x

مصدر

0x0ece

👍2

التعليق الأكثر فائدة

استخدم الخاصية containerElement !

نرى:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  } />

DaxChen في ٢٩ ديسمبر ٢٠١٥

👍46 🎉15 👎2

ال 43 كومينتر

أنا أتساءل عن هذا أيضًا. أنا أستخدم التقديم من جانب الخادم في تطبيقي ، وهذا شيء يجب النظر فيه.

WRidder في ٦ يناير ٢٠١٥

سيؤدي استخدام عناصر الربط بسمات href أيضًا إلى تحسين إمكانية الوصول والسماح للأشخاص باستخدام سلوك المتصفح الذي اعتادوا عليه (على سبيل المثال ، ⌘- انقر لفتح في علامة تبويب جديدة).

tschaub في ٧ يناير ٢٠١٥

ZMYaro في ١٢ يناير ٢٠١٥

ButuzGOL في ٢٥ فبراير ٢٠١٥

batazor في ٨ أبريل ٢٠١٥

mewben في ٢٨ أبريل ٢٠١٥

batazor في ١ مايو ٢٠١٥

nikhildaga في ٢٧ أغسطس ٢٠١٥

rhythnic في ٣ نوفمبر ٢٠١٥

ecesena ، هل تعتقد أن هذا سيظل يمثل مشكلة مع المكون MenuItem ؟ انظر هنا . يمكن أن يحاط MenuItem s بـ <a>..</a> ، أليس كذلك؟

shaurya947 في ١١ نوفمبر ٢٠١٥

👍2

هذا ممكن مع ما اقترحه @ shaurya947 .

alitaheri في ٨ ديسمبر ٢٠١٥

أحاول استخدام MenuItems في LeftNav على النحو التالي:

        let menuItems = (
            <div>
                <MenuItem primaryText="Doors"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} /></a>
                <MenuItem primaryText="Load"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Notes"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Alerts"          leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
                <MenuItem primaryText="Admin"           leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
            </div>
        );

        return (
            <LeftNav
                ref="leftNav"
                docked={false}
                onChange={this._onLeftNavChange}
            >
                {menuItems}
            </LeftNav>
        )

يؤدي التفاف علامة <a> حول علامة <MenuItem> ظهور تحذير validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See MainLayout > a > ... > MenuItem > ListItem > EnhancedButton > a"

إذا قمت بفحص React للمخرجات ، فستحصل على ما يلي.

<a href="/">
    <MenuItem..>
        <ListItem..>
            <div>
                <EnhancedButton..>
                    <a>
                        <TouchRipple ..>
                    </a>
                </EnhancedButton>
            </div>
        </ListItem>
    </MenuItem>
</a>

والتي تعتبر وجود عناصر <a> متداخلة مسيئة.

<MenuItems> <a> ضمن إعلان الزر. ما الخاصية المستخدمة من MenuItem لملء سمة href داخل <EnhancedButton> إنشاؤه؟

يؤدي استخدام كائن MenuItem كدعم لـ LeftNav إلى عمل الارتباط ، لكنني لم أتمكن من معرفة كيفية إضافة الرموز اليمنى / اليسرى بهذه الطريقة.

بمعنى آخر:

let menuItems = [
         { route: '/load_areas/'+ this.state.area + '/doors', text: 'Doors' },
         { route: '/load_areas/'+ this.state.area + '/trailer_loads', text: 'Load' },
         { route: 'notes', text: 'Notes' },
         { route: 'alerts', text: 'Alerts' },
         { route: 'admin', text: 'Admin' }
         ];

<LeftNav
                ref="leftNav"
                docked={false}
                menuItems={menuItems}
                onChange={this._onLeftNavChange}
            />

inkorange في ١٦ ديسمبر ٢٠١٥

هذه مشكلة منفصلة ، يرجى فتح واحدة ، حتى نتمكن من تصنيفها وإضافتها إلى المعالم ، tnx: grin:

alitaheri في ١٦ ديسمبر ٢٠١٥

استخدم الخاصية containerElement !

نرى:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  } />

DaxChen في ٢٩ ديسمبر ٢٠١٥

👍46 🎉15 👎2

الآن تم إيقاف الخاصية Prop linkButton لـ EnhancedButton . لم يعد LinkButton مطلوبًا عند توفير الخاصية href . ستتم إزالته باستخدام الإصدار 0.16.0.

فمثلا:

<MenuItem primaryText="Primary Text" href="/your/link" />

nodejh في ١٢ سبتمبر ٢٠١٦

👍6 😕2

href يعيد تحميل الصفحة. ماذا عن إذا كنت تريد استخدام جهاز التوجيه رد الفعل

cezarneaga في ٢ نوفمبر ٢٠١٦

👍3

cezarneaga حاول href="#/your/link"

Oduig في ٥ نوفمبر ٢٠١٦

<MenuItem
  containerElement={<Link to="/profile" />}
.../>

تشير الوثائق إلى أنك تحتاج إلى إدخال linkButton . إذا قمت بإزالة هذا ، فإنه يعمل بدون أخطاء.

cezarneaga في ٥ نوفمبر ٢٠١٦

👍13

DaxChen رأيت إجابتك المحدثة في stackoverflow لشهر ديسمبر 2016 (حديث للغاية هاها) وكنت أتساءل عما إذا كنت تعرف ما إذا كان هذا يعمل مع MenuItem داخل درج؟ أحاول ما يلي أدناه ولم أتمكن تمامًا من تشغيل الرابط مع MenuItem حيث يبدو أن containerElement لا يفعل شيئًا.

<Drawer
  docked={false}
  width={300}
  onRequestChange={this.closeDrawer}
  open={this.state.open}>
  <AppBar title="Title"
 />
  <MenuItem primaryText="home" containerElement={<Link to="/home" />} />
</Drawer>

Faolain في ٢٥ ديسمبر ٢٠١٦

يعمل containerElement ولكن لم يتم توثيقه ، لذا أعتقد أن هذا الموضوع يجب أن يكون بمثابة التوثيق الرسمي في الوقت الحالي. شكرا!

kgregory في ٩ فبراير ٢٠١٧

مرحبا Faolain !

حقا آسف على الرد المتأخر ...
لقد جربتك البرمجة على تطبيق نظيف create-react-app ، ولكن يبدو أن كل شيء يعمل بشكل جيد ؟!
ربما قمت بتكوين react-router مختلف ، أم أن الإصدار مختلف؟

على أي حال ، إليك مثال على الريبو ، التوضيحي المباشر هنا .

إذا كنت لا تزال غير قادر على العثور على سبب مشكلتك ، فهل يمكنك تقديم عينة من الريبو لإعادة إنتاجها؟

DaxChen في ١٢ فبراير ٢٠١٧

لم يعمل أي من الحلول المذكورة أعلاه على Safari و iOS. إذن هذا ما فعلته كعمل مقابل react-router

          <MenuItem
            onTouchTap={() => {
              this._yourMethod()
              browserHistory.push('/howItWorks')
            }}
            primaryText="Menu Link"
          />

janzenz في ١٤ أبريل ٢٠١٧

janzenz هل هذا المثال هنا لا يعمل في متصفحك؟

لقد جربته في Safari على macOS و Safari على iOS ويعملون جميعًا. هل هذا لا يعمل من أجلك؟

على الرغم من أن الحل الخاص بك يعمل ، إلا أنه قد يتسبب في تحسين محركات البحث بشكل سيئ وستفقد بعض السلوك الأصلي مثل معاينة الرابط والنقر فوق الخيار لفتحه في علامة تبويب جديدة.

DaxChen في ١٦ أبريل ٢٠١٧

DaxChen شكرا على الأفكار. لست متأكدًا مما إذا كانت مشكلتي متعلقة بالرابط الأول. لقد جربت الخيار الثاني بالفعل ولكن بمجرد إضافة عنصر onTouchTap لم يعد يعمل <Link /> .

janzenz في ١٦ أبريل ٢٠١٧

janzenz لقد أضفت onTouchTap في المثال السابق ولا تزال تعمل.
لا أعرف ما إذا كان إعدادك مختلفًا في مكان ما أو شيء ما ... 😢
يمكنك التحقق من الكود المحدث ومعرفة ما إذا كان يعمل من أجلك؟

DaxChen في ١٦ أبريل ٢٠١٧

DaxChen أرى أنك تستخدم material-ui في الإصدار ~0.16.0 . هل جربت أحدث ~0.17.0 ومعرفة ما إذا كان هذا لا يزال يمثل مشكلة؟

janzenz في ١٧ أبريل ٢٠١٧

janzenz كنت أستخدم إصدارًا أقدم ، تم تحديثه للتو إلى أحدث إصدار 0.17.4 وما زال يعمل!

DaxChen في ١٧ أبريل ٢٠١٧

🎉1

تاتش! ربما الإعداد الخاص بي بعد ذلك. شكرًا لتأكيدك أن

janzenz في ١٧ أبريل ٢٠١٧

👍1

DaxChen ، لقد جربت المثال الذي أعطيته لي ، لكنه فشل

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `EnhancedButton`.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:74)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:367)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:238)
    at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:697)
    at ReactDOMComponent.mountComponent (ReactDOMComponent.js:516)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:140)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:97)
    at Object._renderNewRootComponent (ReactMount.js:320)
    at Object._renderSubtreeIntoContainer (ReactMount.js:401)
    at Object.render (ReactMount.js:422)
    at Object.<anonymous> (index.js:36)
    at __webpack_require__ (bootstrap e3e2367…:555)
    at fn (bootstrap e3e2367…:86)
    at Object.<anonymous> (bootstrap e3e2367…:578)
    at __webpack_require__ (bootstrap e3e2367…:555)
    at bootstrap e3e2367…:578
    at bootstrap e3e2367…:578

الكود الخاص بي متاح على https://github.com/hhimanshu/spicyveggie/tree/cards (فرع cards )

لست متأكدًا مما هو مختلف ، لكنه لا يعمل

تضمين التغريدة
حاولت أيضًا استخدام browserHistory.push('/howItWorks') واستوردت import browserHistory from 'react-router-dom' ، لكنني حصلت على undefuned .

Oduig ،
لقد جربت #/your/link ، لكن ذلك لا يأخذني إلى أي مكان
لقد حاولت /your/link ، لكنه أعاد تحميل الصفحة وخسرت Drawer من Material-UI

لم يعمل أي من هذه الأشياء بالنسبة لي. الكود الخاص بي متاح على https://github.com/hhimanshu/spicyveggie/tree/cards ( cards فرع) ، الالتزام المحدد هو https://github.com/hhimanshu/spicyveggie/commit/844b7b7cddf9102995cd2680a783df3b6ef48537 ، يمكن شخص ما الرجاء المساعدة؟

hhimanshu في ٢٤ أبريل ٢٠١٧

hhimanshu تغيير هذا الخط إلى

import { Link } from 'react-router-dom'

مزيد من المعلومات حول MDN

DaxChen في ٢٤ أبريل ٢٠١٧

تضمين التغريدة هذا كان هو. ومع ذلك ، ليس عندما يتم تحميل صفحتي بـ {<Link to="/menu"/>} ، فإنه يتم تحميل الصفحة بأكملها ويختفي Drawer .

screen shot 2017-04-24 at 1 54 23 pm

hhimanshu في ٢٤ أبريل ٢٠١٧

hhimanshu ذلك لأن استخدمته فقط Menu مكون في حياتك \menu الطريق ، لذلك App لن المقدمة.

ضع Menu و Summary داخل App أو بعض مكونات التخطيط ، وقم بتمرير العناصر الفرعية المعنية.

يمكنك استخدام أدوات React-devtools للتحقق من التسلسل الهرمي للمكوِّن الذي تم عرضه وحالاته!

لا يتعلق هذا بواجهة المستخدم المادية ، يرجى قراءة المزيد في البرامج التعليمية / المستندات الخاصة بجهاز التوجيه التفاعلي.

DaxChen في ٢٤ أبريل ٢٠١٧

شكرًا @ DaxChen ، لقد قمت بحلها كـ https://github.com/hhimanshu/spicyveggie/blob/master/src/index.js#L20

hhimanshu في ٢٤ أبريل ٢٠١٧

IveTou في ٩ ديسمبر ٢٠١٧

😕1

الحلول البديلة للروابط التي تمت معالجتها وعدم معالجتها بواسطة React Router.

إذا تم التعامل مع الارتباط الهدف بواسطة React Router

MenuItemLink.js

import React from 'react';
import { MenuItem } from 'material-ui/Menu';
import { Route } from 'react-router-dom';

class MenuItemLink extends React.Component {
  render() {
    const {
      to, also,
      ...rest
    } = this.props;

    return (
      <Route
        render={({ history, location }) => (
          <MenuItem
            onClick={() => {
              history.push(to);
              if (typeof also === 'function') {
                also();
              }
            }}
            {...rest}
          />
        )}
      />
    );
  }
}
MenuItemLink.muiName = 'MenuItem';
export default MenuItemLink;

عينة من الرموز:

import MenuItemLink from './MenuItemLink';

<Menu ... >
        <MenuItemLink to="/users"
          also={this.handleRequestClose}>Users</MenuItemLink>
</Menu>

إذا لم يتم التعامل مع الارتباط الهدف بواسطة React Router ، على سبيل المثال: يتم إعادة توجيه الطلب إلى خادم API أو أيًا كان

وظيفة onClick:

    function facebookLoginRedirect () {
      if (window) window.location.href = "/api/auth/facebook"
      return true;
    }

عينة من الرموز:

<MenuItem onClick={ facebookLoginRedirect }>Login with Facebook</MenuItem>

xemasiv في ١٠ ديسمبر ٢٠١٧

👍9

أنا قادم لأضيف إلى هذا ، في حالة تعثر عليه شخص آخر أيضًا.

في الإصدار 3.4 ، يمكنك تحقيق ذلك على النحو التالي:

import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component={Link} to="/your-path">...</MenuItem>

goyney في ٨ نوفمبر ٢٠١٨

👍25 🎉3 ❤2

كان الحل الوحيد الذي نجح معي دون كسر تخطيط القائمة هو:
`` جافا سكريبت

إشعارات

الملف الشخصي

eladlevy في ١ مارس ٢٠١٩

👍3 👎2

كان الحل الوحيد الذي نجح معي دون كسر تخطيط القائمة هو:

<MenuList>
  <Link to='/your-path' style={{ textDecoration: 'none' }}>
    <MenuItem>
      Notifications
     </MenuItem>
  </Link>
  <Link to='/your-path' style={{ textDecoration: 'none' }}>
    <MenuItem>
      Profile
     </MenuItem>
  </Link>
</MenuList>

eladlevy هذا

<ul>
  <a><li/></a>
  <a><li/></a>
</ul>

NaderIkladious في ١٠ يونيو ٢٠١٩

👍3

ترك هذا هنا في حال كان يساعد أي شخص (تشغيل v3.9.0). كنت بحاجة إلى <Select> لأعمل كقائمة من react-router-dom <Link> s. يتوافق كل ارتباط مع إعداد اللغة ، لذلك ستعرض القائمة المنسدلة قيمة اللغة الحالية من معلمة الاستعلام.

<Select value={currentLanguage}>
  {languages.map(language => (
    <ListItem
      button
      component={btnProps => (
        <Link
          to={ `/things?lang=${ language }` }
          {...btnProps as any}
        />
      )}
      value={language}
      key={language}
    >
      {language}
    </ListItem>
  ))}
</Select>

كان هذا هو الحل الأنظف الذي يمكن أن أجده يتطلب الحد الأدنى من صب TypeScript والحفاظ على المرئيات المتوافقة مع Material UI.

MarkLeMerise في ٢٠ يونيو ٢٠١٩

goyney لديه الحل ، شكرا

NielsDom في ٢٧ أغسطس ٢٠١٩

أنا قادم لأضيف إلى هذا ، في حالة تعثر عليه شخص آخر أيضًا.
في الإصدار 3.4 ، يمكنك تحقيق ذلك على النحو التالي:
import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component={Link} to="/your-path">...</MenuItem>

حل عامل ونظيف شكرا ❤️

MelMacaluso في ٦ سبتمبر ٢٠١٩

👍1

بالنسبة للروابط الخارجية ، ستحتاج إلى استخدام component="a" ، ولكن أيضًا قم بإحاطة MenuItem في <li> :

<MenuList>
    <li>
        <MenuItem
            component="a"
            href="https://google.com"
            target="_blank"
        >Google</MenuItem>
    </li>
</MenuList>

يؤدي هذا إلى إنشاء HTML التالي:

<ul class="MuiList-root MuiList-padding" role="menu" tabindex="-1">
    <li>
        <a class="[...]" tabindex="-1" aria-disabled="false" role="menuitem" href="https://google.com" target="_blank">Google</a>
    </li>
</ul>