Question

我正在为texfield构建可重用的组件，该组件根据位置使用两种不同的内联样式

style={{marginTop:15, marginBottom:35}} // the first of type needs a top margin
style={{marginTop:0, marginBottom:35}} // all others

我讨厌每次使用组件时都必须指定此内容。本质上，我希望第二种样式是默认样式，而布尔样式道具（如firstOfType = {true}）可以访问第一种样式，这将使firstOfType = {false}为默认样式，因此我什至不必指定在我看来。

我在使用它时遇到了麻烦，因为样式需要使用双括号，并且括号内的条件也不起作用。提醒您，我是新来的人。所以在这里和我一起这可能很简单。

这就是我的组件的样子

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

const CMInputField = ({label, value, onChange, rows, margin, style}, context) => {
    return (
        <TextField
            label={context.t(label)}
            value={value}
            onChange={onChange}
            InputLabelProps={{shrink: true}}
            style={{marginTop:0, marginBottom:35}} //the defaulted one
            fullWidth
            multiline
            rows={rows}
            margin={margin}/> 
    );
};

CMInputField.defaultProps = {
    margin: 'normal',
    fullwidth: true,
    multiline: false,
    firstOfType: false,
};

CMInputField.propTypes = {
    label: PropTypes.string,
    value: PropTypes.object,
    onChange: PropTypes.func,
    style: PropTypes.object,
    fullwidth: PropTypes.bool,
    multiline: PropTypes.bool,
    rows: PropTypes.string,
    margin: PropTypes.string,
    firstOfType: PropTypes.bool,
};

CMInputField.contextTypes = {
    t: PropTypes.func.isRequired,
};

export default CMInputField;

我会用这种方式：

<CMInputField
    label="First Input"
    value="Hello"
    onChange={this.myFunction}
    firstOfType/> 

<CMInputField
    label="Second Input"
    value="Hello Again"
    onChange={this.myFunction2}/>

提前谢谢

Answer 1

为什么不能这样尝试

main = do 
  print(show (hanoiDisk (-3))

根据Rect中的prop渲染内联样式

1 个答案: