Material-ui: عنصر القائمة لديه ارتباط؟

TonyFrancis يجب أن تكون قادرًا على إضافة سمة href إلى عنصر القائمة.

TonyFrancis حصلت على تعليقك على

href إلى المستند

تعديل:
اللعنة عليها! يتم تناول هذه المشكلة في # 2243. على العموم؛ ليس من الواضح من الوثائق ما هي جميع الخصائص المتاحة. يجب توثيق ذلك والبيان التالي لا يساعد.
Other properties (no documented) are applied to the root element.
لقد ألقيت نظرة على تنفيذ قائمة جيثب ولا أرى أحد مكونات الحاوية التي يتم استخدامها والتي تحتوي على خاصية containerElement .

بناءً على استجابة TonyFrancis ، لا يلبي href الحاجة بالكامل. إذا كنت تستخدم جهاز توجيه رد الفعل الذي من المحتمل أن يأتي منه المكون Link فستحصل على بعض الفوائد مثل القدرة على تحديد basename .

على سبيل المثال ، إذا كان لديك <Router basename='/my-app'> تغلف تطبيقك بعد ذلك

< ListItem primaryText = { <Link to="a" > as </Link> } />

سترتبط بـ my-app/a دون الحاجة إلى حمل هذا basename كل مكان.

الوثائق ليست واضحة بما يكفي بالنسبة لي. أمم

لا يوجد حقل href في المستند لعنصر القائمة

فقط ركض في هذا. أنا أستخدم هذا وهو يعمل:

<ListItem button component={Link} to='/some-url'>...</ListItem>

mariotacke ^ يُنشئ هذا الكود ul > a ، وهو أمر غير صالح لغويًا ، راجع https://github.com/mui-org/material-ui/issues/7956#issuecomment -362433602

تحرير: لا بأس إذا كان الوالد <nav> أو يستخدم component="nav"

الآن ، يمكنك إنشاء هذا بالكود التالي:
""
PrimaryText = "نص"
عنصر الحاوية = { }
/>
""

مرحبًا Glaadiss Tnx ، إنه يعمل

Glaadiss هذا الترميز يعطيني خطأ:

Warning: React does not recognize the containerElement prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase containerelement instead. If you accidentally passed it from a parent component, remove it from the DOM element.

هل هذا بسبب أن لدي نسخة قديمة من React أو MUI؟

renannobile تحقق مما إذا قمت بتمرير {...props} غير الضروري في أحد مكوناتك . إنه خطأ شائع عندما نقوم بنسخ ولصق من الأدلة: P

Glaadiss لا يبدو أنني قادر على استخدام هذا الإصدار 1.0.0-beta.44

حاول:

<List component="nav">
    <ListItem component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

الحالة المذكورة أعلاه تعمل ولكن بدون تأثير التموج وينتج عنها a مع div كطفل ، وهو أمر غير قانوني.

<List component="nav">
    <ListItem primaryText="Inbox" component={Link} to="/admin/user">
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

تعمل الحالة المذكورة أعلاه ولكن بدون تأثير التموج وينتج عنها عنصر بدون نص مرئي.

<List component="nav">
    <ListItem primaryText="Inbox" containerElement={<Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

تُظهر هذه الحالة أعلاه سمة [كائن الكائن] للحاويات في HTML.

<List component="nav">
    <ListItem ContainerComponent={() => <Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

<List component="nav">
    <ListItem ContainerComponent={Link to="/admin/user" />}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>



md5-7ff35357efa037d9c88356d4d3bf14ad



<List component="nav">
    <ListItem ContainerComponent={Link} ContainerProps={{ to: '/admin/user' }}>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

آه! الحل هو هذا.

<List component="nav">
    <ListItem component={Link} to="/admin/user" button>
      <ListItemIcon>
        <PersonIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <DraftsIcon />
      </ListItemIcon>
      <ListItemText primary="Drafts" />
    </ListItem>
  </List>

mschipperheyn هذا يعمل لكنه

مرحبًا ، أي تحديثات حول كيفية القيام بذلك بشكل صحيح؟

هذا يصلح لي بما في ذلك تموج:

<ListItem button component={
  ({ children, ...props }) =>
    <Link to="/" {...props as LinkProps}>
      {children}
    </Link>
}>

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

<ListItem component={props => (
  <ListItem button>
    <Link style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0
    }}
    to={"/"}>
    </Link>
    {props.children}
  </ListItem>
)}>
    <ListItemIcon>
      <ArrowForwardIcon/>
    </ListItemIcon>
    <ListItemText primary="List Item" />
</ListItem>

لمستخدمي Next.js:

<List component="nav">
  <Link href="/admin/resources" passHref>
    <ListItem component="a" button>
      <ListItemIcon>
        <InboxIcon />
      </ListItemIcon>
      <ListItemText primary="Resources" />
    </ListItem>
  </Link>
  ...

قد يبدو هذا واضحًا - ولكن إذا لم تكن بحاجة إلى استخدام <Link/> ويمكنك استخدام <a> (على سبيل المثال - لا تحصل على مزايا SPA الذي تكتبه) ، يمكنك القيام بذلك :

<a href="/yourlink">
  <ListItem
    button
  >
    <ListItemText primary="Your Link Text" />
  </ListItem>
</a>

بشكل افتراضي ، يجب أن تطلب Eslint rel="noopener noreferrer" إذا كان target="_blank"

              <List>
                <a
                  href="https://fb.me/xxxxxxxxx"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={classes.hrefLink}
                >
                  <ListItem button>
                    <ListItemIcon>
                      <ThumbUp className={classes.icon32} />
                    </ListItemIcon>
                    <ListItemText primary="Visit our Facebook Page" secondary="@xxxxxxxxxx" />
                  </ListItem>
                </a>
              </List>

يعمل هذا مع الإصدار 4:

    <ListItem button to={to} component={Link}>
      {children}
    </ListItem>

هذا هو منهجي ، باستخدام فئة Mui-selected المضمنة:

<ListItem
  button
  component={NavLink}
  activeClassName={"Mui-selected"}
  to={"/some-url"}
  exact
>
  ...
</ListItem>

الارتباط لا يعمل مع ListItem الرجاء مساعدتي antone

@ gautam751 شارك التعليمات البرمجية أو الريبو ، من فضلك ، حتى يتمكن الأشخاص من مساعدتك

فقط ركض في هذا. أنا أستخدم هذا وهو يعمل:

<ListItem button component={Link} to='/some-url'>...</ListItem>

عملت من أجلي ، شكرا
لكنني في الحقيقة استخدمه على النحو التالي:

<ListItem button component={Link} to="/SomePath">
       ...
</ListItem>