天道酬勤,学无止境

在自定义 React 元素上添加 style 属性似乎没有回升(Adding style attribute on custom React element does not seem to pick up)

问题

我有如下代码(使用 CSS 模块):

return (
  <div>
    <LandingPage className={styles.hidden} />
  </div>
);

哪个不起作用(即不将 CSS 应用于元素)。 然而,回归

  <div>
    <div className={styles.hidden}>
      <LandingPage />
    </div>
  </div>

工作得很好。 为什么在自定义元素上应用className会导致类被忽略?

回答1

这里className不会直接应用于LandingPage组件,它基本上是您从父组件传递到子组件的props值,您需要在LandingPage组件中应用该类。

像这样:

<LandingPage customClassName={styles.hidden} />

内部LandingPage

render(){
   console.log('class name', this.props.customClassName);
   return(
       <div className={this.props.customClassName}>
           {/* other elements */}
       </div>
   )
}

永远记住props 是一个对象,你从父组件传递的任何数据都只会成为 props 值的一部分,你需要在子组件的某个地方使用这些数据。

检查console ,它将打印您从父级传递的正确类名。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何创建/处理 IsMouseOverChanged(How do I create/handle IsMouseOverChanged)
    问题 我喜欢 IsMouseDirectlyOverChanged 的​​功能,但它只适用于最顶层的元素。 我真正想做的是监视控件的 IsMouseOver 属性,而不管其 z-index,并在修改 IsMouseOver 时收到通知。 如果我拥有这个属性,我可以做 INotifyPropertyChanged,但不幸的是它归 UIElement 所有。 仍在学习 WPF 的诀窍,所以这可能很容易,但我不熟悉如何监视属于父类的属性。 与 IsMouseDirectlyOver 不同,IsMouseOver 没有附加更改的事件。 回答1 我看到有一个可接受的解决方案,我只是想分享我的意见。 在我的情况下,我在用户控件中有一个标签,我需要对鼠标做出反应。 对我来说,MouseEnter 和 MouseLeave 事件会触发,所以我可以处理它们。 我在代码隐藏中定义了标签(因为我在运行时以编程方式放置它)并且刚刚添加了标签对象的标准事件。 IsMouseDirectlyOverChanged 对我不起作用,因为我将鼠标悬停在用户控件上。 如果有另一个控件重叠,这也适用。 所以也许这不适合你的情况,也许它适合:-) 我也想粘贴 xaml,但似乎我没有得到降价的东西:-) ... Private Sub Rectangle1_MouseEnter(sender As Object, e As
  • 在自定义组件中响应本机访问引用(React native accessing refs in a custom component)
    问题 我有一个自定义的 TextInput。 当我编辑第一个TextInput并在键盘上点击“Next”时,我希望它关注第二个TextInput 。 我之前在 Stack Overflow 中搜索过,似乎我可以使用ref 。 但是我不确定如何使用自定义TextInput做到这一点。 这是我的基本 CustomTextInput 代码: let CustomTextInput = React.createClass({ propTypes: { refName: React.PropTypes.string, returnKeyType: React.PropTypes.string, onSubmitEditing: React.PropTypes.func }, getDefaultProps: function(){ return { refName: "", returnKeyType: "default", onSubmitEditing: () => {} } }, render: function(){ return( <View> <TextInput ref={this.props.refName} returnKeyType={this.props.returnKeyType} onSubmitEditing={this.props.onSubmitEditing
  • 在反应应用程序中动态地将样式属性添加到 css 类(Adding style attributes to a css class dynamically in react app)
    问题 我正在使用带有 css-loader 的 webpack 来加载我的 css 样式并将它们添加到 React 组件中。 import styles from '../styles/cell.css'; .cell { border-radius: 50%; background-color: white; } <div className={styles.cell} /> 我正在动态计算单元格的高度/宽度。 在这里他们描述了如何动态地向组件添加样式,但我更喜欢在没有 style 属性的情况下这样做。 我尝试在其中一个父组件中执行此操作,认为它可能会更改 css 类,但这似乎不起作用。 import cell_styles from '../styles/cell.css'; cell_styles.width = this.cellSize + 'px' cell_styles.height = this.cellSize + 'px' 关于如何最好地做到这一点的任何反馈? 回答1 您应该使用 style 属性,这就是它的目的。 import classLevelStyles from '../styles/cell.css'; const style = { width: this.calcWidth() + 'px', height: this.calcHeight()
  • React.js内联样式最佳做法(React.js inline style best practices)
    问题 我知道您可以在React类中指定样式,如下所示: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); 我是否应该以这种方式进行所有样式设置,并且在CSS文件中完全没有指定任何样式? 还是应该完全避免使用内联样式? 两者兼而有之,似乎很奇怪而且很乱-在调整样式时需要检查两个位置。 回答1 目前还没有很多“最佳实践”。 我们中那些使用内联样式作为React组件的人仍在进行大量试验。 有很多方法大相径庭:React内联风格的lib比较表 全部还是什么都没有? 我们所谓的“样式”实际上包含许多概念: 布局-元素/组件与其他对象的关系的外观外观-元素/组件的特征行为和状态-元素/组件在给定状态下的外观 从状态样式开始 React已经在管理组件的状态,这使得状态和行为样式自然适合与组件逻辑并置。 与其构建要使用条件状态类进行渲染的组件,不如考虑直接添加状态样式: // Typical component with state-classes <li className={classnames
  • 警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 检查`ListView`的渲染方法(Warning: Each child in an array or iterator should have a unique “key” prop. Check the render method of `ListView`)
    问题 我使用带有ListView的ReactNative为iOS和android构建了一个应用程序。 当使用有效的数据源填充列表视图时,屏幕底部将显示以下警告: 警告:数组或迭代器中的每个子代都应具有唯一的“键”道具。 检查ListView的渲染方法。 此警告的目的是什么? 在消息之后,他们链接到此页面,在此讨论了完整的不同内容,这些内容与react native无关,而与基于Web的reactjs有关。 我的ListView是使用以下语句构建的: render() { var store = this.props.store; return ( <ListView dataSource={this.state.dataSource} renderHeader={this.renderHeader.bind(this)} renderRow={this.renderDetailItem.bind(this)} renderSeparator={this.renderSeparator.bind(this)} style={styles.listView} /> ); } 我的数据源包含以下内容: var detailItems = []; detailItems.push( new DetailItem('plain', store.address) ); detailItems
  • HTML 表格 colgroup 元素不起作用?(HTML table colgroup element not working?)
    问题 我希望表格的每一列都有不同的样式。 我读过你可以通过使用<colgroup>或<col>来做到这一点,但我没有运气。 我这里有一个例子,似乎没有任何改变。 难道我做错了什么? 这会在 xhtml 上工作吗? 我知道我可以在每个<td>上添加一个“class”属性,但这似乎很弱。 回答1 没错。 虽然所有浏览器都支持 colgroup 本身,但对于内部 col 元素的属性却并非如此。 在可能的属性中,所有浏览器仅支持width 。 但与 CSS 不同的是, <col width="">仅支持像素和百分比宽度。 不要使用它。 相反,创建 CSS 类并将它们分配给每个td 。 是的,这很糟糕。 编辑更新了上面的链接到具有更好信息的页面 回答2 将您的table-layout设置为自动而不是固定... table {table-layout: auto;} 我的个人网站支持多个主题,我一直看到这些差异。 回答3 您可以使用 css 选择器来获得类似的结果,而无需添加额外的类。 例如,如果您想为第二列提供特定样式,您可以使用: table>tbody>td:nth-child(2){font-weight: bolder;} 回答4 这是我使用的一个技巧,实际上效果很好。 在通用(站点范围内)css 文件中,我放置了: .mytable td:nth-child(1) { width
  • 在自定义跨度 jQuery Mobile 滑块标签上设置字体(Set font on custom span jQuery Mobile slider labels)
    问题 你好,互联网的好心人, 我在 jQuery Mobile 范围滑块的左侧和右侧添加和附加一些文本内容作为标签,这可以正常工作,但我似乎无法让字体正常工作......字体显示不正确,而且我似乎无法在跨度内设置/重置标签字体。 这是一个测试页面:http://www.simdock.com/amort-test/dev-scratch/amort/scratchtesting-Slider-label-font-issue.html 这是放置在滑块左侧和右侧的自定义滑块标签(最小和最大滑块范围值)的 javascript 代码: $.fn.extend({ sliderLabels: function(left,right) { var $this = $(this); var $sliderdiv= $this.next("div.ui-slider[role='application']"); // $sliderdiv .prepend('<span class="ui-slider-inner-label" style="position: absolute; left:0px; top:20px;">'+left+ '</span>') .append('<span class="ui-slider-inner-label" style="position
  • CSS:不向某些元素添加内容后(CSS :after not adding content to certain elements)
    问题 我在理解CSS :after属性的行为时遇到了麻烦。 根据规范(此处和此处): 顾名思义, :before和:after伪元素指定元素在文档树内容之前和之后的位置。 似乎没有限制哪些元素可以具有:after (或:before )属性。 但是,它似乎仅适用于特定的元素... <p>可以, <img>不能, <input>不能, <table>可以。 我可以测试更多,但重点是。 请注意,这在各浏览器之间似乎非常一致。 是什么决定对象是否可以接受:before和:after属性? 回答1 img和input都是替换的元素。 替换的元素是其外观和尺寸由外部资源定义的任何元素。 示例包括图像( <img>标签),插件( <object>标签)和表单元素( <button> , <textarea> , <input>和<select>标签)。 所有其他元素类型都可以称为非替换元素。 :before和:after仅适用于不可替换的元素。 从规格: 笔记。 该规范并未完全定义:before和:after与被替换元素(例如HTML中的IMG)的交互。 这将在以后的规范中更详细地定义。 使用span:before, span:after ,DOM如下所示: <span><before></before>Content of span<after></after></span> 显然
  • React中的内联CSS样式:如何实现a:hover?(Inline CSS styles in React: how to implement a:hover?)
    问题 我非常喜欢React中的内联CSS模式,并决定使用它。 但是,您不能使用:hover和类似的选择器。 那么,在使用内联CSS样式时实现悬停时高亮显示的最佳方法是什么? #reactjs的一个建议是拥有一个Clickable组件并像这样使用它: <Clickable> <Link /> </Clickable> Clickable具有hovered状态,并将其作为道具传递给Link。 但是, Clickable (我实现它的方式)将Link包装在div以便可以将onMouseEnter和onMouseLeave设置为它。 这使事情变得有点复杂,但(如span包裹在一个div行为不同于span )。 有没有更简单的方法? 回答1 我处在同样的情况。 确实很像在组件中保留样式的模式,但是悬停状态似乎是最后的障碍。 我所做的是编写一个mixin,您可以将其添加到需要悬停状态的组件中。 此混合将向组件的状态添加一个新的hovered属性。 如果用户将鼠标悬停在组件的主DOM节点上,则将其设置为true如果用户离开该元素,则将其设置为false 。 现在,在组件渲染函数中,您可以执行以下操作: <button style={m( this.styles.container, this.state.hovered && this.styles.hover, )}>{this.props
  • 如何使用 react-stripe-elements 输入组件放置边框样式?(How can I put border styling with react-stripe-elements input component?)
    问题 关于这个 React 组件库。 https://github.com/stripe/react-stripe-elements 如何在输入组件中放置边框样式? <CardElement style={{ base: { fontSize: '18px', border: '1px solid red' // it is not work. } }} /> 但是,似乎他们没有提供自定义样式界面。 https://stripe.com/docs/elements/reference#element-options\ 有人知道吗? 更新: 以下是使用StripeElement类应用自定义样式的示例代码。 .StripeElement { border: 1px solid #eee; } .StripeElement--invalid { border: 1px solid red; } 回答1 好问题! 如此处所述,要将填充或边框应用于 Stripe 元素,您需要设置包含该元素的父 DOM 节点的样式,而不是元素本身: https://stripe.com/docs/elements/reference#the-element-container 我会将您的 CardElement 包装在一个 div 中,然后对其应用样式。 如上所述,Elements
  • 将动作栏添加到Theme.Black.NoTitleBar Android(Adding an action bar to Theme.Black.NoTitleBar Android)
    问题 我正在尝试以编程方式添加开发工具栏,如开发文档中所示,但遇到一个错误。 我的minSdk设置为11,我的应用程序具有一个布局和一个活动,并且活动中的唯一代码是: @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.inbox); ActionBar actionBar = getActionBar(); actionBar.show(); } 如果我删除了最后两行,那么我的应用程序将运行。 我知道全息主题会自动包含操作栏,但我不喜欢editText视图。 关于为什么发生这种情况的任何想法。 我应该使用HoloTheme并为视图设置不同的主题吗? 同样,我没有在日食中出现任何错误。 我的程序崩溃了,无法从Logcat破译为空指针异常。 回答1 从您链接到的文档中: 如果您有想要删除操作栏的自定义活动主题,请将android:windowActionBar样式属性设置为false 。 但是,如果使用主题删除操作栏,则该窗口将根本不允许该操作栏,因此您以后将无法添加它-调用getActionBar()将返回null 。
  • 何时在CSS中使用!important属性(When to use the !important property in CSS [duplicate])
    问题 这个问题已经在这里有了答案: 在CSS中使用“!important”有什么含义? [重复] (9个答案) !important在CSS中是什么意思? (5个答案) 2年前关闭。 考虑: #div p { color: red !important; } ... #div p { color: blue; } 我了解!important工作原理。 在这种情况下,div将呈现红色,因为现在它具有优先级( !important )。 但是我仍然无法找出合适的情况来使用它。是否有示例说明!important节省了时间? 回答1 这是现实生活中的情况 想象一下这种情况 您有一个全局CSS文件,该文件可以全局设置网站的外观。 您(或其他人)在元素本身上使用内联样式,这通常是非常不好的做法。 在这种情况下,您可以将全局CSS文件中的某些样式设置为重要样式,从而覆盖直接在元素上设置的内联样式。 实际的真实世界示例? 当您无法完全控制HTML时,通常会发生这种情况。 例如,考虑一下SharePoint中的解决方案。 您希望零件是全局定义的(样式化),但是存在一些您无法控制的内嵌样式。 !important使这种情况更易于处理。 其他现实生活场景还包括一些写得不好的jQuery插件,这些插件也使用内联样式... 我想您现在已经有了主意,也可以提出其他一些建议。 您何时决定使用!important
  • React基础一
    目录 react相关说明 react不能像Vue一样直接在浏览器运行React的快速构建工具通过CRA来构建项目 构建流程常见问题 react元素与组件 React元素函数式组件类组件辅助工具 组件的传参和接参组件的组合和嵌套 组件的组合组件的嵌套在子组件中显示父组件中子组件书写的内容 jsx原理【 了解 】组件中的DOM样式React的数据定义问题 属性状态 属性props验证jsx里面的注释属性vs状态 相同点不同点stateprops使用场景总结 状态提升状态组件 说明 React中使用的是 es6 模块化规范 (即import引入,exports default导出) React是不能直接在浏览器中运行的,我们必须借助工具才能运行React程序 因为React是jsx,它必须经过webpack编译为js才能运行 React的快速构建工具 脚手架作用:快速构建一个项目类型 CRA [ 大纲要求 - react官方推荐的 ]DvaUmi 通过CRA来构建项目 构建流程 安装CRA [ create-react-app ] 全局安装 yarn add create-react-app globalcnpm i create-react-app -g 临时使用 [ npx ] npx create-react-app 项目名称 安装需要等待一段时间,这个过程实际上会安装三个东西
  • iOS面试的一些小问题!
    React vs Vue前言:技术选型没有绝对的对与错技术选型要考虑的因素非常多表达自己的观点,并说明理由两者的本质区别:vue - 本质是MVVM框架,由mvc发展而来React - 本质是前端组件化框架,由后端组件化发展而来但两者都能实现相同的功能模板的区别:vue - 使用模板(template)由angular提出React - 使用JSX,一种编程语法,类似于html模板语法上更倾向于JSX:vue中的指令v-需要现学,并且它们的值是放在引号中,比较困惑;而JSX中,只需要知道大括号中可以写JS表达式,就OK模板分离上更倾向于vue组件化的区别:React本身就是组件化,没有组件化就不是Reactvue也支持组件化,不过是在MVVM上的扩张对于组件化,更倾向于React,做的更彻底两者共同点:支持组件化数据驱动视图总结:1.国内,首推vue,文档易读、易学、社区足够大2.团队水平高,推荐使用React,组件化和jsx作为一个开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的iOS开发交流群:130595548,不管你是大牛还是小白都欢迎入驻 ,让我们一起进步,共同发展!(群内会免费提供一些群主收藏的免费学习书籍资料以及整理好的几百道面试题和答案文档!)React对组件化的理解与面向对象类似,分为: 封装、继承、多态组件的封装视图数据变化逻辑(数据驱动视图变化
  • 使用自定义字体与 expo 原生反应,每次加载字体(Using custom Font in react native with expo, loading font every time)
    问题 我正在使用 Expo 和 create-react-native 应用程序。 我喜欢手机上的实时/热重新加载功能,但我想知道自定义字体。 https://docs.expo.io/versions/v17.0.0/guides/using-custom-fonts.html#loading-the-font-in-your-app Expo 的 API 只有异步加载它们的方向。 我是否必须在我想要自定义字体的每个组件上执行此操作? 当我已经加载一次时,这似乎会导致一些不必要的调用。 有没有办法将字体设置为全局或在加载后通过道具传递? 似乎他们通过该链接中的最后一行建议了这种方法: 注意:通常您会希望在显示应用程序之前加载应用程序的主要字体,以避免在字体加载后文本闪烁。 推荐的方法是将 Font.loadAsync 调用移动到您的顶级组件。 ......但他们没有解释如何做到这一点,如果那是他们暗示的。 所以我的问题是: 1) 多次(在每个组件上)加载自定义字体会导致性能问题吗? (或者它可能是在第一个之后从缓存中提取的?) 2)加载后,您可以通过属性向下传递字体或将其设置为全局吗? 最后 3)这是世博会唯一的问题吗? 还是只有 create-react-native 应用程序的问题? 或者只是一个实时加载/热加载问题? 另请注意,我正在使用 Windows/Android
  • ASP.NET MVC 3 Razor-将类添加到EditorFor(ASP.NET MVC 3 Razor - Adding class to EditorFor)
    问题 我试图将一个类添加到输入中。 这不起作用: @Html.EditorFor(x => x.Created, new { @class = "date" }) 回答1 将类添加到Html.EditorFor没有意义,因为在其模板内部您可以具有许多不同的标签。 因此,您需要在编辑器模板中分配该类: @Html.EditorFor(x => x.Created) 并在自定义模板中: <div> @Html.TextBoxForModel(x => x.Created, new { @class = "date" }) </div> 回答2 从ASP.NET MVC 5.1开始,可以将一个类添加到EditorFor (原始问题指定为ASP.NET MVC 3,考虑到该问题,仍然是最好的答案)。 @Html.EditorFor(x=> x.MyProperty, new { htmlAttributes = new { @class = "MyCssClass" } }) 请参阅: ASP.NET MVC 5.1的新增功能,对编辑器模板的Bootstrap支持 回答3 您不能为通用EditorFor设置类。 如果知道所需的编辑器,则可以立即使用它,在那里可以设置类。 您无需构建任何自定义模板。 @Html.TextBoxFor(x => x.Created, new { @class
  • React函数式组件,使用react-html-table-to-excel实现导出Excel功能
    react-html-table-to-excel 简介 安装 yarn react-html-table-to-excel 属性说明 属性类型描述tablestring需要导出的table的id,需要为table标签添加,两者要对应filenamestringExcel文件的名字sheetstringExcel文件里面Sheet的名字idstring添加到按钮上的id属性classNamestring添加到按钮上的class属性buttonTextstring按钮中显示的文字 className 组件的按钮默认是没有样式的,我们可以把Ant Design中按钮的类名给他,让它显示出样式来 按钮的自带类名是没有样式的 手动给他改个类名 filename sheet 使用方法 import React, { useState, useRef, useEffect } from 'react'; import ReactHTMLTableToExcel from 'react-html-table-to-excel'; export default function Mrtj(props) { // 用ref来获取组件按钮实例,使用里面的方法 const buttonRef = useRef(null); // 禁止组件按钮的默认点击事件 useEffect(() => { const
  • 将 CSS 样式添加到 React Native WebView(Adding CSS styling to React Native WebView)
    问题 所以我对此感到有些困惑......我在我们的应用程序的一部分中使用了 WebView,WebView 的原因是因为我们从 API 端点中提取,该端点返回给我们一个 HTML 字符串。 此 HTML 字符串中的字体大小和其他内容的样式不是为了在移动应用程序中使用而设计的,因此我们正在尝试为其添加一些样式更改以提高可见度。 我见过人们在 html 文件的顶部添加样式标签以向元素添加特定的 html 样式,并且一切正常,除了 WebView 的 HTML 中的字体大小在每次单击具有其中包含的 WebView。 这是当前代码(样式 + html + 脚本): let rawHTML = htmlStyle + this.props.itemDetails.body_html.replace("\n", "").replace(/("\/\/[c])\w/g, "\"https://cd").replace(/(width: 10.094%;)/g, "").replace(/(width: 84.906%;)/g, "") + heightScript 我还在调试器中控制台记录了这个字符串,以确保它缝合良好,甚至创建了 index.html 并将确切的字符串粘贴到那里,以确保它在那里正确显示。 这是样式字符串: let htmlStyle = `<style> #height
  • 隐藏在 React-Native Android 中的元素溢出(Element overflow hidden in React-Native Android)
    问题 我在这里有一个应用程序,我需要将徽标放在导航栏中。 那需要溢出场景布局。 在 Ios 中运行良好没有问题,但在 android 中似乎他不工作。 我把代码放在图像的底部。 如您所见,我使用 EStyleSheet 以便让我使用 %. IOS 安卓 import React from 'react'; import { Scene, Router } from 'react-native-router-flux'; import EStyleSheet from 'react-native-extended-stylesheet'; import { View, Platform } from 'react-native'; import { SmallLogo } from './components'; import { checkColor } from './helpers'; import { HomeScreen, ImagePickerScreen, WaitingResponseScreen, ResultsScreen } from './modules'; import Colors from '../constants/Colors'; const styles = EStyleSheet.create({ navStyle: { flex: 1
  • React:我可以操纵React渲染的DOM多少?(React: How much can I manipulate the DOM React has rendered?)
    问题 这就是我在做什么:jsfiddle 关键部分是: position: function() { var container = $(this.getDOMNode()); this._menu = $(this.refs.menu.getDOMNode()); this._menu.appendTo(document.body). offset({ top: container.offset().top + container.outerHeight(), left: container.offset().left }); }, restore: function() { this._menu.appendTo(this.getDOMNode()); }, componentWillUpdate: function() { this.restore(); }, componentDidUpdate: function() { this.position(); }, componentDidMount: function() { this.position(); }, 现在,这很好用。 我将内容放回组件更新之前,假设React在更新之间不留DOM,并且不会错过它。 实际上,React似乎可以移动内容