MaterialUI ListItem的rightIconButton内的多个项目

Question

我想在rightIconButton内的ListItem上附加多个项目。

我正在使用Material UI v0.20和React@15.6.2

      <ListItem
        rightIconButton={
          <span>
            <RaisedButton />
            <TrashIcon />
          </span>
        }
      />

如何包装物品以避免警告？

警告：onKeyboardFocus标签上的未知道具span。从元素中删除此道具。

Answer 1

尝试使用HOC：

function Single() {
  return (
    <div>
      <RaisedButton>Hello</RaisedButton>
      <RaisedButton>wORLD</RaisedButton>
    </div>
  );
}

function App() {
  return (
    <MuiThemeProvider>
      <List>
        <ListItem rightIconButton={<Single />} />
      </List>
    </MuiThemeProvider>
  );
}

Answer 2

自定义组件将有助于消除警告：

function GroupedButtons(props) {

  return (
    <span>
       <RaisedButton>Hello</RaisedButton>
       <RaisedButton>WORLD</RaisedButton>
     </span>
  )
}

...

function App() {

  ...

  <ListItem
     rightIconButton={
        <GroupedButtons />
     }
  />

工作示例：