Question

我正在使用Material UI next库，目前我正在使用List组件。由于该库处于测试阶段，因此许多参数名称都会发生变化。为了解决这个问题，我计划在所需的组件周围编写一个包装器，以便不会破坏。我的列表组件：

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

我应该如何为List（比如 myListWrapper ）和ListItem编写包装器，以便包装器组件可以处理props并将它们传递给里面的实际MUI列表组件？

Answer 1

我曾为MUI包装工作，为项目编写自己的库。我们关注的实现是将props从我们的包装器组件传递给inner / actual-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>
        )
    }
};

以上代码将允许您对组件进行以下操作：

您可以使用具有确切名称的道具，如材质用户界面中使用的那样。
您可以操纵/更改/转换/重塑从外部传递的道具。
如果传递包装器组件的道具与MUI使用的名称完全相同，它们将直接发送到内部组件。（...运营商。）
您可以使用与材料名称完全相同的组件，以避免混淆。
代码是根据高级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，决定这些组件的道具名称（根据您的方便），并在这些组件内部将这些值映射到实际的Material-UI组件属性。 / p>

注意：

如果您为组件使用相同的prop名称（与material-ui组件的名称相同），那么您也可以这样写：

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

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

检查此示例：

＆＃13;

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')
)

＆＃13;

<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' />

＆＃13;

如何使用React JS在材质UI组件周围编写包装器？

2 个答案: