在React

Question

我在React组件中有<p>标签，我希望根据道具将其居中对齐或左对齐。现在，我正在为每个 <p>标签编写相同的条件，如下所示：

<p align={this.props.someBoolean ? "center" : "left"}>

很显然，我无法将这种情况放入关联的CSS文件中，但我想实现类似的结果-在中央位置对<p>标签设置一次样式。这可能吗？

Answer 1

您可以将CSS规则添加到块包装器中：

<div style={{textAlign: this.props.someBoolean ? "center" : "left"}}> 
    <p>...</p>
    <p>...</p>
    ----------
    <p>...</p>
</div>

Answer 2

先从npm安装style-it，然后在主要组件中安装

  

您应在路由器组件中添加样式标签，否则将仅在同一组件中应用

class Main extends React.Component {
  state = {
    someBoolean: true
  };
  render() {
    return (
      <div>
        <Style>
          {`
      .someClass {
          font-size: small;
          font-family: arial;
          background: #f1f1f1;
        }
      p { // this will apply on all p tag if you added in router component
          font-size: large;
          textAlign: ${this.state.someBoolean ? "center" : "left"}
      }
      input[type=text] {
        width: 50%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
      }
         `}
        </Style>
         <Switch>
        <Route exact path="/a" component={A} />
        <Route path="/b" component={B} />
        <Redirect to='/a' />
        </Switch>
      </div>
    );
  }
}
export default Main;