Reactjs 基于prop in Rect的内联样式渲染

我正在为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;

从“React”导入React；
从“道具类型”导入道具类型；
从“物料界面下一步/TextField”导入TextField；
const CMInputField=（{label，value，onChange，rows，margin，style}，context）=>{
返回(
);
};
CMInputField.defaultProps={
保证金：'正常'，
全宽：对，
多行：false，
第一种类型：false，
};
CMInputField.propTypes={
标签：PropTypes.string，
值：PropTypes.object，
onChange:PropTypes.func，
样式：PropTypes.object，
全宽：PropTypes.bool，
多行：PropTypes.bool，
行：PropTypes.string，
边距：PropTypes.string，
第一个类型：PropTypes.bool，
};
CMInputField.contextTypes={
t:PropTypes.func.isRequired，
};
导出默认CMInputField；

我会这样使用它：

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

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

---

提前谢谢你

你为什么不能这样试试

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

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

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

constcminputfield=（{label，value，onChange，rows，margin，style}，context）=>{
让textFieldStyle={“marginTop”：0，“marginBottom”：35}；
if（firstOfType）textFieldStyle={“marginTop”：15，“marginBottom”：35}；
返回(
);
};

我喜欢你的想法，但由于双重声明“风格”，编译失败了。是的，我没有注意到，谢谢你的纠正。我更新了我的答案现在你可以试一下了！！！搞定了！谢谢你，伙计。我知道这一定很容易……不管怎样，对你们来说。：）很乐意帮忙：）