Reactjs 如何基于浏览器位置路径名应用不同的样式？ const-activeStyle={ 边框：“1px实心透明”， 边框颜色：'#e4e6e8'， borderBottomColor:“#fff”， marginBottom:“-1px”， 光标：“默认值” } 常数notActive={ 光标：“指针” } 类LoginSignup扩展了React.Component{ render（）{ const pathName=this.props.history.location.pathName； 返回( 登录 注册 ); } } 使用路由器导出默认值（LoginSignup）；

我想根据位置路径名应用不同的样式。怎么做？我在style属性中尝试了三元运算符，但它显示了未使用的标记，预期为错误。

您需要这样编写它：

const activeStyle = {
  border: '1px solid transparent',
  borderColor: '#e4e6e8', 
  borderBottomColor: '#fff', 
  marginBottom: '-1px',
  cursor: 'default'
}

const notActive = {
  cursor: 'pointer'
}

class LoginSignup extends React.Component {
  render() {
    const pathName = this.props.history.location.pathname;
    return (
        <div style={{ pathName === '/login' ? ...activeStyle : ...notActive  }}>
           <Link to='/login'><span>Log in</span></Link>
         </div>
         <div style={{ pathName === '/signup' ? ...activeStyle : ...notActive  }}>
            <Link to='/signup'><span>Sign up</span></Link>
           </div>
      </div>
    );
  }
}


export default withRouter(LoginSignup);

。。。

如果您需要使用某些样式，我将按照以下方式进行操作：

<div style={pathName === '/login' ? activeStyle : notActive}>...</div>

。。。

---

为了可读性，可以将

activeStyle

重命名为

defaultStyle

您的扩展运算符不正确，需要在对象中扩展它。以下两种方法之一将起作用

<div style={pathName === '/login' ? activeStyle : { ...activeStyle, ...notActive}}>...</div>

class LoginSignup扩展了React.Component{
render（）{
const pathName=this.props.history.location.pathName；
返回(
登录
注册
);
}
}

或

class LoginSignup扩展了React.Component{
render（）{
const pathName=this.props.history.location.pathName；
返回(
登录
注册
);
}
}

您可以尝试下面的代码。
const pathName=this.props.history.location.pathName；
让headerlink=''；
如果（路径名=='/login'）{
校长联系=
登录
}否则{
校长联系=
注册
;
}
返回标题链接；

是否出现错误或未应用样式？错误，意外标记，预期，谢谢@janhartmann。我还有另一种风格的道具，如何应用两者呢？再次感谢你。我想申请这样一个考虑使用一个类名，而不是内嵌样式，以更好的维修性随着时间的推移：

class LoginSignup extends React.Component {
  render() {
    const pathName = this.props.history.location.pathname;
    return (
        <div style={{ pathName === '/login' ? activeStyle : notActive  }}>
           <Link to='/login'><span>Log in</span></Link>
         </div>
         <div style={{ pathName === '/signup' ? activeStyle : notActive  }}>
            <Link to='/signup'><span>Sign up</span></Link>
           </div>
      </div>
    );
  }
}

class LoginSignup extends React.Component {
  render() {
    const pathName = this.props.history.location.pathname;
    return (
        <div style={{ pathName === '/login' ? {...activeStyle} : {...notActive}  }}>
           <Link to='/login'><span>Log in</span></Link>
         </div>
         <div style={{ pathName === '/signup' ? {...activeStyle} : {...notActive}  }}>
            <Link to='/signup'><span>Sign up</span></Link>
           </div>
      </div>
    );
  }
}

  you can try the code like below.

     const pathName = this.props.history.location.pathname;
     let headerlink='';
     if(pathName=='/login'){
       headerlink=<div style={{...activeStyle }}>
               <Link to='/login'><span>Log in</span></Link>
             </div>
     }else{
      headerlink=<div style={{...notActive }}>
                <Link to='/signup'><span>Sign up</span></Link>
               </div>;
    }
    return headerlink;