如何使用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' />