Question

现在我正在制作一个div区域框的简单隔间

名称为卡

在Card Class中，我写下这样的

  render() {
const tagId = this.props.tagId;
const tagTitle = this.props.tagTitle;
const tagColor = this.props.tagColor;
console.log('----------------------', tagColor);
return (
  <div style={{ overflow: 'hidden' }}>
    <div
      id={tagId}
      style={{
        height: '20px',
        width: 'auto',
        background: { tagColor },
        margin: '20px 0',
        maxWidth: '100%'
      }}
    >
      { tagTitle }
    </div>
    <div>{this.props.data}</div>
  </div>
);
}

但它无法读取样式表达式

上的tagColor变量

background: { tagColor },

我发现变量的值可以改变。但不是在风格= {}为什么？

如何处理这些东西？

任何想法？

Answer 1

不要在样式标记内使用{}，可以直接指定变量

class App extends React.Component {
 
render() {
    const tagId = 'abc';
    const tagTitle = "hello";
    const tagColor = 'red';
    console.log('----------------------', tagColor);
    return (
      <div style={{ overflow: 'hidden' }}>
        <div
          id={tagId}
          style={{
            height: '20px',
            width: 'auto',
            background:  tagColor ,
            margin: '20px 0',
            maxWidth: '100%'
          }}
        >
          { tagTitle }
        </div>
        <div>{53253}</div>
      </div>
    );
}
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script>
<div id="app"></div>

无法读取自定义React隔离区变量

1 个答案: