如何使用React JS圍繞材料UI組件編寫包裝器？

Question

我正在使用Material UI下一個庫，當前正在使用列表組件。 由於該庫處於beta版本，因此其許多參數名稱都已更改。 為了解決這個問題，我打算圍繞必需的組件編寫一個包裝器，以使事情不會中斷。 我的清單組件：

<List dense>
   <List className={classes.myListStyles}>
      <ListItem disableGutters/>
   </List>
</List>

我應該如何為List（例如myListWrapper ）和ListItem編寫包裝器，以便包裝器組件可以處理道具並將它們傳遞給內部的實際MUI列表組件？

Answer 1

我曾經從事過MUI包裝程序的工作，為項目編寫了自己的庫。 我們關注的實現是將props從包裝器組件傳遞到內部/實際MUI組件。 與操縱。 在包裝抽象道具時。

以下是我解決方案的方法：

import { List as MaterialList } from 'material-ui/List';
import { React } from 'react';
import { ListItem as MaterialListI } from 'material-ui/ListItem';

class List extends MaterialList {

    constructor(props){
        const propsToPass = {
            prop1 : change(props.prop1),
            ...props
        }
        super(propsToPass);
    }
};

class ListItem extends MaterialListItem {

    const propsToPass = {
            prop1 : change(props.prop1),
            prop2 : change(props.prop2),
            ...props
        }
        super(propsToPass);
    }
};


class App extends React.Component {
    render () {
        return (
            <List prop='value' >
                <ListItem prop1={somevalue1} prop2={somevalue2} />
                <ListItem prop1={somevalue1} prop2={somevalue2} />
                <ListItem prop1={somevalue1} prop2={somevalue2} />
            </List>
        )
    }
};

上面的代碼將允許您對組件進行以下操作：

• 您可以在Material UI中使用具有確切名稱的道具。
• 您可以操縱/更改/變換/重塑從外部傳遞的道具。
• 如果包裝器組件的道具傳遞的名稱與MUI使用的名稱完全相同，則它們將直接發送到內部組件。 （...運算符。）
• 您可以使用與材料使用的名稱完全相同的Component來避免混淆。
• 代碼是根據高級JSX和JavaScript ES6標准編寫的。
• 您有空間來操縱道具以傳遞到MUI組件中。
• 您還可以使用proptypes實現類型檢查。

您可以要求任何困惑/查詢。

Answer 2

您可以這樣寫：

const MyList = props => (
    <List 
        {/*mention props values here*/}
        propA={props.A}
        propB={props.B}
    >
        {props.children}
    </List>
)

const MyListItem = props => (
    <ListItem 
        {/*mention props values here*/}
        propA={props.A}
        propB={props.B}
    >
        {props.children}
    </ListItem>
)

現在，你需要使用MyList和MyListItem ，決定道具的名稱，這些成分（按你的方便），而這些組件映射中的值與實際材料的UI組件的屬性。

注意：

如果您為組件使用相同的道具名稱（名稱與material-ui組件相同），則可以這樣編寫：

const MyList = ({children, ...rest}) => <div {...rest}>{children}</div>

const MyListItem = ({children, ...rest}) => <p {...rest}>{children}</p>

---

檢查以下示例：

 const A = props => <div>{props.children}</div> const B = props => <p>{props.children}</p> ReactDOM.render( <A> <A> <B>Hello</B> </A> </A>, document.getElementById('app') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='app' />