首页 文章

在React项目中找到一个组件

提问于
浏览 次
0

我在我的React应用程序中编写了一个Logout按钮组件，我希望它位于屏幕的右上角 .

render() {
   <LogoutButtonComponent height: , backgroudColor: />
}

它不会让我为高度等分配任何值 .

这是Logout组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.props.onLogout();
  };

  render() {
    return <button type="button" onClick={this.handleClick}>Logout</button>;
  }
}

我应该通过<col />找到它吗？

reactjs

2 回答

  • 0

    要添加内联样式，您应该将 style 对象定义为prop，并将其传递给值，如doniyor2109中所述 . 但是，使用它有一些注意事项 .

    style={{ height: 100, height: '100px', height: '100%', minHeight: '100px'}} .

    • 并非每个值都应作为整数传递，有些值需要作为字符串传递

    • 并非每个css属性都按照您的预期传递，css min-height 实际上被传递为 minHeight ，因此用较低的驼峰案例样式替换所有连字符

    • 内联样式极难管理 . 我建议你至少在组件外部创建一个对象，并将其传递给：

    const DivStyle = { minHeight: '100px' }

    然后：

    <LogoutButtonComponent style={DivStyle} />

    • 如果你想在其他地方使用 import {DivStyle} from './somefile' ，你可以在 DivStyle 前加上 export

    • 我建议您查看像styled-components这样的库，因为它使样式更容易！

    • 我建议您查看this article，其中概述了您的选择

    回复于
  • 0

    你并没有真正为你的组件添加样式 . 最好在源代码中为实际组件添加这些样式 . 那你究竟想要它显示出来的是什么？我将提供一种模板，您可以将其更改为您想要的 .

    转到Logout Button Component的源代码 . 在返回渲染方法时，尝试添加 div 调用它的容器 . 然后在css文件中添加样式到 div ，或者如果您使用的是 react-bootstrap 或 reactstrap 或 @material/ui/core ，则可以根据文档调整样式 .

    您可以为 className .container 添加 css ，使其按照您希望的方式显示 .

    import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class LogOutButton extends Component {
  static contextTypes = {
    store: PropTypes.object.isRequired,
  };

  handleClick = () => {
    this.props.onLogout();
  };

  render() {
    return ( 
      <div className="container">
         {* notice the className here *}
         <button type="button" onClick={this.handleClick}>Logout</button>
     </div>
    )
  }
}

    希望这可以帮助 .

    回复于

相关问题