Material-ui: प्रतिक्रिया-राउटर के साथ संगत ListItem कन्वर्ट करें

को निर्मित 30 अग॰ 2017 · 21टिप्पणियाँ · स्रोत: mui-org/material-ui

मैं प्रत्येक ListItem को List से Link घटक बनाना चाहता हूं।

मेरे पास Drawer घटक है, जो List घटक से बना है,
वह सूची 4 ListItem s से बनी है।
जो मैं हासिल करना चाहता हूं वह यह है कि प्रत्येक ListItem को एक रिएक्टर राउटर Link परिवर्तित करें।
मैंने दराज के ऑनक्लिक विधि को संशोधित करने की कोशिश की, क्लिक की गई सूची की आईडी प्राप्त करें और फिर आईडी के आधार पर प्रोग्रामेटिक रूप से विंडो का स्थान बदलें।
लेकिन मुझे लगता है कि यह दृष्टिकोण अधिक निर्णायक है कि प्रतिक्रिया अवधारणाओं।
मैं भी जोड़ने की कोशिश की Link करने के लिए component में प्रोप ListItem , लेकिन यह त्रुटि हुई। (मैं आप में एक का इस्तेमाल किया है देखा है component में प्रोप दस्तावेज़)।
इस आवश्यकता को प्राप्त करने के लिए अनुशंसित तरीका क्या है?

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List';
import Face from 'material-ui-icons/Face';
import Person from 'material-ui-icons/Person';
import Assignment from 'material-ui-icons/Assignment';
import Link from 'react-router-dom/Link';
import { FormattedMessage } from 'react-intl';

const styles = {
   list: {
      width: 250,
      flex: 'initial',
    },
};

 class UndockedDrawer extends Component {

   constructor() {
      super();
      this.onClick = this.onClick.bind(this);
    }

    onClick(e, data) {
       console.log(data);
       this.props.onRequestClose();
     }

   render() {
       const classes = this.props.classes;
        const sidebarListItems = (
     <div>
         <ListItem button >
            <ListItemIcon>
               <Person />
           </ListItemIcon>
            <ListItemText primary={<FormattedMessage id="user" />} />
          </ListItem>
    <ListItem button>
      <ListItemIcon>
        <Assignment />
      </ListItemIcon>
      <ListItemText primary={<FormattedMessage id="consultant" />} />
    </ListItem>
    <ListItem button>
      <ListItemIcon>
        <Face />
      </ListItemIcon>
      <ListItemText primary={<FormattedMessage id="student" />} />
    </ListItem>
  </div>
);

const sidebarList = (
  <div>
    <List className={classes.list} >
      {sidebarListItems}
    </List>
  </div>
);

return (
  <div>
    <Drawer
      anchor="right"
      open={this.props.open}
      onRequestClose={this.props.onRequestClose}
      onClick={this.onClick}
    >
      {sidebarList}
    </Drawer>
   </div>
   );
   }
 }

  UndockedDrawer.propTypes = {
     classes: PropTypes.shape({}).isRequired,
     open: PropTypes.bool.isRequired,
     onRequestClose: PropTypes.func.isRequired,
    };

   export default withStyles(styles)(UndockedDrawer);

सामग्री-यूआई: 1.0.6-बीटा
प्रतिक्रिया: ^ 15.6.1
ब्राउज़र: क्रोम: 60
प्रतिक्रिया-राउटर-डोम: ^ 4.1.2

question

स्रोत

mehrdad-shokri

👍2

सबसे उपयोगी टिप्पणी

यह प्रलेखन में शामिल है: https://material-ui.com/compenders/buttons/#third -party-routing-Library।

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';
import { Omit } from '@material-ui/types';

// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
  <Link innerRef={ref as any} {...props} />
));

const CollisionLink = React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'innerRef' | 'to'>>(
  (props, ref) => <Link innerRef={ref as any} to="/getting-started/installation/" {...props} />,
);

export default function ButtonRouter() {
  return (
    <Router>
      <ListItem color="primary" component={AdapterLink} to="/">
        Simple case
      </ListItem>
      <ListItem component={CollisionLink}>Avoids props collision</ListItem>
    </Router>
  );
}

zhangwei900808 4 सित॰ 2017

👍75 🎉14 ❤12 😄12

सभी 21 टिप्पणियाँ

मुझे लगा, मैं ListItem को Link में निम्नानुसार लपेट सकता हूं:

<Link to="users" style={{ textDecoration: 'none' }}>
      <ListItem button >
        <ListItemIcon>
          <Person />
        </ListItemIcon>
        <ListItemText primary={<FormattedMessage id="user" />} />
      </ListItem>
    </Link>

इस दृष्टिकोण के साथ, ऑनक्लिक विधि को भी निकाल दिया जाएगा।
किसी भी सुझाव या imporvements?

mehrdad-shokri 30 अग॰ 2017

👍17 🎉3

मुझे पता चला, मैं अनुसरण के रूप में एक सूची में ListItem लपेट कर सकते हैं

यह समाधान शब्दार्थ रूप से मान्य नहीं है। इस बात पर ध्यान दें कि हम प्रलेखन पर समस्या को कैसे संभालते हैं:

https://github.com/callemall/material-ui/blob/92bd073015b9cc0dff3a26195fcb49153ddaab78/docs/src/modules/compenders/AppDrawerNavItem.js#L71 -L83 -L83

आप भी इसे आजमा सकते हैं

https://github.com/callemall/material-ui/blob/92bd073015b9cc0dff3a26195fcb49153ddaab78/docs/src/pages/pemos/buttons/FlatButtons.js#L40 -L4242-L4242

oliviertassinari 30 अग॰ 2017

👍4

यह प्रलेखन में शामिल है: https://material-ui.com/compenders/buttons/#third -party-routing-Library।

import React from 'react';
import { MemoryRouter as Router } from 'react-router';
import { Link, LinkProps } from 'react-router-dom';
import ListItem from '@material-ui/core/ListItem';
import { Omit } from '@material-ui/types';

// The usage of React.forwardRef will no longer be required for react-router-dom v6.
// see https://github.com/ReactTraining/react-router/issues/6056
const AdapterLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
  <Link innerRef={ref as any} {...props} />
));

const CollisionLink = React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'innerRef' | 'to'>>(
  (props, ref) => <Link innerRef={ref as any} to="/getting-started/installation/" {...props} />,
);

export default function ButtonRouter() {
  return (
    <Router>
      <ListItem color="primary" component={AdapterLink} to="/">
        Simple case
      </ListItem>
      <ListItem component={CollisionLink}>Avoids props collision</ListItem>
    </Router>
  );
}

zhangwei900808 4 सित॰ 2017

👍75 🎉14 ❤12 😄12

मैं इसे डॉक्स में नहीं देखता:
https://material-ui-next.com/demos/lists/
https://material-ui-next.com/demos/drawers/

यह एक आम बात है जब प्रतिक्रिया रूटर उपयोग कर रहा है, लेकिन यह स्पष्ट उपयोग करने के लिए कैसे नहीं कर रहा है NavLink एक में ListItem ।
Button component प्रोप के साथ?
और बटन प्रॉप्स और कंपोनेंट प्रॉप्स को एक ही JSX टैग पर एक साथ मिलाया जाता है?
इस तरह का मिक्सचर क्या है?
इतना जटिल क्यों?

alexilyaev 10 नव॰ 2017

😕3

@Mehrdaad के समाधान का उपयोग करते समय लिंक सामान्य MUI सूची की तरह दिखते हैं, लेकिन जब @oliviertassinari ने component={Link} किया, तो शैली गड़बड़ हो गई:
(छवि में माउस "बिल्ड" पर मँडरा रहा है, लेकिन दूसरा आइटम अंडरलाइन हो जाता है ...)

screen shot 2017-11-16 at 12 09 05

ilyador 16 नव॰ 2017

👍1

@ilyador यह UI लिंक शैली समस्या हल हो गई है।

oliviertassinari 24 जन॰ 2018

@ zhangwei900808 नहीं, यह अभी भी शब्दार्थ से गलत है, यह <ul><a ..>... उत्पन्न करता है
https://codesandbox.io/s/lpwq74p30m

बस ऊपर दिए गए उत्तर का उपयोग करें

caub 2 फ़र॰ 2018

❤2 🚀1

@oliviertassinari ऐसा करने का एक आसान तरीका होगा:

const styles = {
    li: {
        '&:hover': {
            backgroundColor: 'transparent',
        },
    },
};
// ...
<MenuItem disableGutters className={classes.li}>
    <Button component={Link} to="/logout" ...

एक डबल हॉवर प्रभाव से बचने के लिए, MenuItem और Button (जिसमें अभी भी थोड़ा सा गटर / पैडिंग है, एक और मुद्दा)
क्योंकि यह बोझिल है

डेमो: https://codesandbox.io/s/nk834yk5pl ( component={Link} to="/..." का उपयोग नहीं कर रहा है लेकिन वही है)

caub 2 फ़र॰ 2018

@ क्यूब आप एक अतिरिक्त बटन घटक का परिचय क्यों दे रहे हैं? आप MenuItem पर घटक गुण का उपयोग कर सकते हैं।

oliviertassinari 2 फ़र॰ 2018

@oliviertassinari क्योंकि ul > a वैध नहीं है html5 https://codesandbox.io/s/lpwq74p30m

caub 3 फ़र॰ 2018

@ केक nav > a वैध है।

oliviertassinari 3 फ़र॰ 2018

ठीक है, धन्यवाद, ठीक है https://codesandbox.io/s/lpwq74p30m

caub 3 फ़र॰ 2018

👍1

यहाँ समाधान है कि मेरी समस्या हल हो गई है

<List>
        {menus.map((menu: any, index: any) => {
          return (
            <ListItem
              key={index}
              {...{ to: menu.link }}
              component={Link}
              button={true}
            >
              <ListItemIcon>{menu.icon}</ListItemIcon>
              <ListItemText primary={menu.text} />
            </ListItem>
          );
        })}
      </List>

इस प्रकार बस के रूप में ListItem का उपयोग करें
कुंजी = {इंडेक्स}
** {... {से: menu.link}} **
घटक = {लिंक}
बटन = {} सच
>

pushpanjalip 22 अक्तू॰ 2018

❤15 👍4 😄3

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

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

// or
<ListItem component={props => <Link to="/" {...props} />} button>
@mehrdaad @oliviertassinari यह काम कर रहा है ^ _ ^

यह मेरे लिए एकदम सही था। धन्यवाद!

kentferolino 22 मई 2019

MUI v4 माइग्रेशन (मैं 4.3.1 पर) के बाद सबसे ज्यादा वोट किया गया उत्तर विफल रहा है "फंक्शन कंपोनेंट्स को रिफ नहीं दिया जा सकता है। इस रेफ को एक्सेस करने का प्रयास विफल हो जाएगा। क्या आपका मतलब React.forwardRef ()?"

मैंने एक रैपर की तरह NavLink घटक को प्रतिस्थापित किया है:

import React, { Component } from "react"
import { NavLink } from "react-router-dom"

/**
 * React Router Nav Link wrapper to forward the ref to fix "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
 *
 * From https://material-ui.com/guides/composition/#caveat-with-refs
 */
class NavLinkMui extends Component {
    render() {
        const { forwardedRef, ...props } = this.props
        return <NavLink {...props} ref={forwardedRef} />
    }
}

export default NavLinkMui

उपयोग:

<ListItem
    button
    component={NavLinkMui}
    to='/'
>
    <ListItemIcon>
        <SlideshowIcon />
    </ListItemIcon>
</ListItem>

HugoGresse 6 अग॰ 2019

👍4 😄1

@ ह्यूगोग्रेस हां, आपको आगे रेफरी एपीआई का उपयोग करने की आवश्यकता है। आपको प्रलेखन में उदाहरण खोजने में सक्षम होना चाहिए। मैंने अप-टू-डेट उत्तर के साथ https://github.com/mui-org/material-ui/issues/7956#issuecomment -326908167 अपडेट किया है। हमें बताएं कि क्या यह ठीक है।

oliviertassinari 6 अग॰ 2019

@oliviertassinari ने किया।

मैं अभी भी आगे के साथ कुछ समस्या हो रही है आगे समाधान या घटक एक जहाँ बटन पाठ रंग विषय पैलेट रंग को ध्यान में नहीं ले रहा है। टेक्स्ट का रंग palette.type: 'dark' से मैच करने के लिए सफ़ेद होना चाहिए, लेकिन सफ़ेद है।

शायद MUI पर एक बदलाव से जुड़ा हुआ है क्योंकि component प्रॉप्स के बिना मुझे अभी भी समस्या हो रही है।
Capture d'écran 2019-08-06 16 54 51

यहाँ पढ़ने वालों के लिए, आप ListItemText के लिए अतिरिक्त सहारा पास कर सकते हैं ...

<ListItemText
    primaryTypographyProps={{
        color: 'textPrimary'
    }}
    primary="Dashboard"
/>

BTW, आपका उदाहरण अब TS में है।

HugoGresse 6 अग॰ 2019

यहाँ समाधान है कि मेरी समस्या हल हो गई है
<List>
        {menus.map((menu: any, index: any) => {
          return (
            <ListItem
              key={index}
              {...{ to: menu.link }}
              component={Link}
              button={true}
            >
              <ListItemIcon>{menu.icon}</ListItemIcon>
              <ListItemText primary={menu.text} />
            </ListItem>
          );
        })}
      </List>
इस प्रकार बस के रूप में ListItem का उपयोग करें
कुंजी = {इंडेक्स}
** {... {से: menu.link}} **
घटक = {लिंक}
बटन = {} सच
>

button={true} बस बिना किसी लिंक के UI के व्यवहार को समान बनाता है।

zhangzw16 19 अग॰ 2019

टाइपस्क्रिप्ट में ऐसा करने की कोशिश करने वाले अन्य लोगों के लिए:

निर्दिष्ट करने के लिए ListItem घटक गुण का उपयोग करके एक सरल उदाहरणListItem कार्यान्वयन के रूप में तत्व। टाइपस्क्रिप्ट में ट्रिक यह है कि अवांछित और अनावश्यक टाइपस्क्रिप्ट त्रुटियों को हटाने के लिए लिस्ट इटेम के प्रॉप्स पर स्प्रेड ऑपरेटर (...) का उपयोग करें जो इस प्रकार के कंपोनेंट को निर्दिष्ट करता है और लिस्ट इट के लिए "टू" प्रॉपर्टीज को सामान्य रूप से लाएगा (टाइपस्क्रिप्ट) त्रुटि TS2769 संपत्ति 'घटक' प्रकार पर मौजूद नहीं है 'IntrinsicAttributes ...)

import { NavLink } from "react-router-dom";

        <List>
            <ListItem button={true} {...{ component: NavLink, to: "/Somewhere" }}>
                <ListItemIcon>
                    <ShoppingCartIcon />
                </ListItemIcon>
                <ListItemText primary="Orders" />
            </ListItem>
        </List>

या वैकल्पिक रूप से यदि आप उदाहरण के लिए ListItem पर एक ऑनक्लिक फ़ंक्शन का उपयोग करना चाहते हैं:

    <List>
        <ListItem button={true} {...{ onClick: () => alert("foo") }}>
            <ListItemIcon>
                <DashboardIcon />
            </ListItemIcon>
            <ListItemText primary="Dashboard" />
        </ListItem>
    </List>

`` `

yoDon 18 नव॰ 2019

👍3

इसने मेरे लिए काम किया

const NavLinkMui = React.forwardRef((props, ref) => (
  <NavLink {...props} activeClassName="Mui-selected" ref={ref} />
))

<ListItem button component={NavLinkMui} to={to}>{text}</ListItem>

jamime 11 फ़र॰ 2020

MUI v4 माइग्रेशन (मैं 4.3.1 पर) के बाद सबसे ज्यादा वोट किया गया उत्तर विफल रहा है "फंक्शन कंपोनेंट्स को रिफ नहीं दिया जा सकता है। इस रेफ को एक्सेस करने का प्रयास विफल हो जाएगा। क्या आपका मतलब React.forwardRef ()?"
मैंने एक रैपर की तरह NavLink घटक को प्रतिस्थापित किया है:
import React, { Component } from "react"
import { NavLink } from "react-router-dom"

/**
 * React Router Nav Link wrapper to forward the ref to fix "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?"
 *
 * From https://material-ui.com/guides/composition/#caveat-with-refs
 */
class NavLinkMui extends Component {
    render() {
        const { forwardedRef, ...props } = this.props
        return <NavLink {...props} ref={forwardedRef} />
    }
}

export default NavLinkMui
उपयोग:
<ListItem
    button
    component={NavLinkMui}
    to='/'
>
    <ListItemIcon>
        <SlideshowIcon />
    </ListItemIcon>
</ListItem>

धन्यवाद @HugoGresse यह पूरी तरह से अच्छी तरह से काम करता है :-)

kolagrey 20 फ़र॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-ui: प्रतिक्रिया-राउटर के साथ संगत ListItem कन्वर्ट करें

सबसे उपयोगी टिप्पणी

सभी 21 टिप्पणियाँ

संबंधित मुद्दों