在 React 内联样式中使用 props 作为键属性

Question

在 React 中，inline styles 指定了一个对象，该对象的键是样式名称的驼峰式版本。你会如何使用道具作为键值？

例如：

const {
    position
} = this.props;

let triangleStyle = {
    borderLeft: '5px solid transparent',
    borderRight: '5px solid transparent',
    `border${position}`: '5px solid red'
};

function Component() {
    return <div style={triangleStyle}></div>;
}

Answer 1

试试这样的东西：

const triangleStyleFoo = (position) => ({
    borderLeft: '5px solid transparent',
    borderRight: '5px solid transparent',
    `border${position}`: '5px solid red'
});

function Component() {
    const { position } = this.props;
    const triangleStyle = this.triangleStyleFoo(position);
    return <div style={triangleStyle}></div>;
}

Answer 2

由于我们正在计算样式的键值，我们可以：

将所有逻辑放在组件中，使用computed property names

function Component({ position }) {
  const triangleStyle = {
    borderLeft: '5px solid transparent'
    borderRight: '5px solid transparent',
    [`border${position}`]: '5px solid red',
  }

  return <div style={triangleStyle} />
}

或者，将三角形样式提取到函数中

const getTriangleStyle = position => ({
  borderLeft: '5px solid transparent'
  borderRight: '5px solid transparent',
  [`border${position}`]: '5px solid red',
})

function Component({ position }) {
  return <div style={getTriangleStyle(position)} />
}

Answer 3

const {
    position
} = this.props;

let triangleStyle = {
    borderLeft: '5px solid transparent',
    borderRight: '5px solid transparent'
};

triangleStyle[`border${position}`] = '5px solid red'
function Component() {
    return <div style={triangleStyle}></div>;
}

在 React 内联样式中使用 props 作为键属性

Using props as the key property in React inline style

javascript

css

reactjs

inline-styles

在 React 内联样式中使用 props 作为键 属性

Using props as the key property in React inline style

javascript

css

reactjs

inline-styles

在 React 内联样式中使用 props 作为键属性