右键切换的 Material-UI ListItem 组件

Question

这似乎很基本，以至于我觉得我一定误解了它的工作原理。我有一个简单的演示组件，它呈现一个包含三个 ListItem 的 material-ui 列表。每个列表项在右侧都有一个使用 rightToggle 属性实现的切换。出于演示的目的，每个切换的生成方式都不同。

首先是一个基本的material-ui Toggle组件。第二个是自定义组件包装了一个 Toggle，第三个是由函数调用生成的。

一些代码：

import React from 'react';
import Paper from 'material-ui/Paper';
import { List, ListItem } from 'material-ui/List';
import Toggle from 'material-ui/Toggle';
import MyToggleComponent from './MyToggleComponent';


const myToggleFunction = id => <Toggle onClick={() => console.log(id)} />;

const TestPage = () =>
    <div>
        <Paper style={{ width: 500, padding: 15, margin: 25 }}>
            <List>
                <ListItem
                    primaryText="This is the first list item"
                    secondaryText="This toggle for this item is directly defined"
                    rightToggle={<Toggle onClick={() => console.log('1 - clicked')} />}
                />
                <ListItem
                    primaryText="This is the second list item"
                    secondaryText="This toggle is generated from a component"
                    rightToggle={<MyToggleComponent text="2 - clicked" />}
                />
                <ListItem
                    primaryText="This is the third list item"
                    secondaryText="This toggle is generated programatically"
                    rightToggle={myToggleFunction('3 - clicked')}
                />
            </List>
        </Paper>
    </div>;

export default TestPage;

和自定义组件 - 非常基础

import React from 'react';
import PropTypes from 'prop-types';
import Toggle from 'material-ui/Toggle';


const MyToggleComponent = ({ text }) => <Toggle onClick={() => console.log(text)} />;

MyToggleComponent.propTypes = {
    text: PropTypes.string.isRequired,
};

export default MyToggleComponent;

结果：

所有三个切换都会生成预期的控制台输出。第一项和第三项呈现如我所料，列表项右侧有一个 Toggle。但第二个使用自定义组件将 Toggle 呈现在列表项上方。谁能解释一下为什么？

Answer 1

Material-UI 是 cloning 这些元素的底层，并且正在添加/注入一个道具 style。在第一个和第三个示例中，实际值是 Material UI 定义的组件，它们接受属性 style，如文档 here 所述。然而，您自己定义的组件只传递了 text 属性，对样式没有任何作用。

所以归结为所有 3 个示例都通过了 style prop，但只有第一个和第三个使用它。糟糕的是，这没有很好的记录。

它确实说它需要是一个 Toggle 元素，而您自己的组件不是一个，因为它包装了 Toggle 组件。

pushElement(children, element, baseStyles, additionalProps) {
    if (element) {
      const styles = Object.assign({}, baseStyles, element.props.style);
      children.push(
        React.cloneElement(element, { // element is your own defined component
          key: children.length,
          style: styles, // here the style property is passed
          ...additionalProps, // your text property is passed here
        })
      );
    }   
}

source

所以要修复这个变化：

const MyToggleComponent = ({ text }) => <Toggle onClick={() => console.log(text)} />;

到：

const MyToggleComponent = ({ text, style }) => 
<Toggle style={style} onClick={() => console.log(text)} />;