将没有值的自定义HTML属性添加到JSX
是一种在React中自定义组件的常见做法。在JSX中，可以通过在HTML标签中添加自定义属性来传递额外的信息给组件。
在React中，将没有值的自定义HTML属性添加到JSX的步骤如下：
- 在JSX中的HTML标签中添加自定义属性，例如：
<CustomComponent customProp />。 - 在自定义组件中，通过props对象来访问这些自定义属性。例如，在CustomComponent组件中，可以通过
props.customProp来访问该属性的值。
这种做法的优势是可以轻松地传递额外的信息给组件，使组件更加灵活和可复用。通过自定义属性，可以将任意类型的数据传递给组件，包括字符串、数字、布尔值、对象等。
应用场景：
- 通过自定义属性可以传递配置信息给组件，使组件具有不同的行为和样式。
- 可以将回调函数作为自定义属性传递给组件，实现与父组件的交互。
- 可以通过自定义属性传递数据给子组件，实现组件之间的数据传递和共享。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库MySQL版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
- 腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
请注意，以上链接仅供参考，具体产品选择应根据实际需求和情况进行。
相关·内容
2回答
我使用Visual作为一个React项目，并有许多.js文件，如下所示：
import React, { PureComponent } from 'react'
class Foobar extends PureComponent {
render() {
return (
<main>
Foo
</main>
)
}
}
export default Foobar
React自己的方法的自动完成可以正常工作(比如将componentWill...添加到组件中)，但是在输入JSX时我
浏览 6提问于2018-02-07得票数 6
我正尝试在我的ASP.NET MVC5项目的.jsx文件中使用import关键字。我希望能够将其他React组件导入到另一个React组件中，但是，当使用import关键字时，我得到了以下错误：
未捕获SyntaxError:无法在模块外部使用import语句
下面是我的代码：
Index.cshtml：
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="conten
浏览 0提问于2020-06-15得票数 0
1回答
我正在尝试使用JSX和内联CSS为一个增大大小的元素制作动画 const iconHtml = `<div style="background: url('${iconUrl}'); width: 100%; height: 100%; transition: 0.5s; background-repeat: round; transform: scale(4);"onmouseover="this.style.scale=2;"onmouseout="this.style.scale=1;"" >
浏览 19提问于2021-02-08得票数 1
我正在构建一个简单的静态视图引擎，它的目标是呈现静态HTML，并生成一个包含DOM事件(onClick等)组件的js文件。
我做第一部分的方法是需要一个指定的JSX文件，例如，如下所示：
import React from 'React';
export default class Test extends React.Component {
clicked() {
alert('Clicked the header!');
}
render() {
return (
<
浏览 5提问于2017-10-11得票数 10
回答已采纳
2回答
我正在阅读react文档，并看到了以下内容：
使用JSX指定属性
You may use quotes to specify string literals as attributes: const element = <div tabIndex="0"></div>;
我对javascript相当满意，但我不太清楚文档中的“属性”意味着什么。我知道对象属性，但这看起来是一个简单的变量。
如果反应性js属性与属性不同，那么它究竟是什么？
浏览 0提问于2020-02-04得票数 1
2回答
我正在开发一个开源的JS框架，我想为它的组件使用带有类型记录的JSX。但是，对于JSX的类型定义，我有一个问题。
TS期望：
<Header title="Hello World" />
(对于任何类似反应的框架)：
function Header(props: { title: string }) : JSXElement
在此框架中，实际类型基于可观察性()：
function Header(props: Observable<{ title: string }>) : JSXElement | Observable<JSXElement>
浏览 6提问于2020-09-16得票数 7
回答已采纳
1回答
我正在使用这2个CDN在我的项目中包含React库，但是当我使用JSX将一些html呈现到HTML文档的主体上时，它并不会识别JSX为JSX (我正在使用chrome)，因此当它将JSX作为javascript读取时会抛出一个错误。我做错了什么吗？任何帮助都很好:) CDN的：
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/re
浏览 1提问于2019-07-21得票数 4
在学习HTML事件处理程序和React的过程中，我理解了在HTML中，事件处理程序的值，例如一个函数，后面应该有圆括号。据我所知，JSX元素是在React中编写类似于元素的html的另一种方式，但是当我们编写这些元素时，我们应该省略括号，我不明白为什么？如果它们表示类似HTML的元素，那么它们的行为不应该是一样的吗？
<button onClick={shoot}>JSX element!</button>
<button onclick="shoot()">HTML element!</button>
浏览 0提问于2020-11-21得票数 1
2回答
我试图使用props在ReactJS中传递一些值，但是，值不是传递不显示的。
这是我的项目html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React JS</title>
</head>
<body>
<div id="app"></div>
<script src=
浏览 3提问于2019-05-28得票数 0
回答已采纳
由于React 16现在允许使用，所以我尝试在我的类型记录代码中利用这一点：
import * as React from 'react';
<div className="page" size="A4">
</div>
但是收到以下错误消息：
错误TS2339:在'DetailedHTMLProps< HTMLAttributes< HTMLDivElement>，HTMLDivElement>‘类型中不存在属性'size’。
这个建议做一个module augmenta
浏览 12提问于2017-09-14得票数 70
回答已采纳
1回答
如果HTML5指定“选中”属性没有值，而该属性被可靠地解释为未选中复选框*，那么以下JSX代码的行为在浏览器之间是否可能不一致？(在Chrome和IE中，它似乎像我预期的那样起作用。)
<input type="checkbox" checked={node.props.checked} />
如果是这样的话，考虑到下面的JSX是无效的，实现这一目标的标准方法是什么？
<input type="checkbox" {node.props.checked? "checked" : ""} />
浏览 2提问于2017-12-09得票数 2
回答已采纳
5回答
我希望能够在react/jsx代码中使用html标记的自动完成。它对html文件的工作方式是一样的。我能否配置崇高的文本3，以启用标签自动完成的jsx文件？
浏览 4提问于2015-05-04得票数 59
回答已采纳
我想添加一个新的ckeditor到我的救生筏，因为我们需要限制一个可用的功能。然而，我不想改变原来的一个，因为我们以后可能需要它的另一种形式。
我如何添加一个新的ckeditor，可以用来为new内容文章创建一个结构？我是否需要为救生筏创造一个新的主题或类似的东西？
信息:我们的救生筏运行在Jboss服务器上。
编辑：
我已经创建了一个钩子，它覆盖了html\js\editor\ckeditor\ckconfig.jsp文件并添加了
config.toolbar_Mini = [
['Bold', 'Italic', 'Underline
浏览 0提问于2016-05-09得票数 0
在我的代码中，我在主应用程序文件中使用import './index.css';行导入index.css。然而，当我尝试构建应用程序时，我得到了以下错误，即使我知道CSS文件本身没有问题： ERROR in ./src/index.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See
浏览 18提问于2020-03-21得票数 0
回答已采纳
3回答
我一直在尝试将尾风集成到我的反应性本地博览项目中，当我在App.js中应用顺风App.js时，它运行得很好，但当我向它添加了react导航并尝试使用Homscreen.js组件中的样式时，样式就没有显示，什么也没有发生。只是裸露的短信而已。
这是我的tailwindcss.config.js文件
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./App.{js,jsx,ts,tsx}",
"./<custom d
浏览 40提问于2022-10-02得票数 2
1回答
我从流星开始并做出反应。这就是我所做的：
meteor create simple-react
meteor add kadira:flow-router
meteor add kadira:react-layout
mkdir client server lib
mkdir client/components
touch client/head.html
touch lib/routes.jsx
在routes.jsx中，我添加了主页路由：
FlowRouter.route("/", {
name: "Home",
action(params) {
浏览 0提问于2015-12-26得票数 0
回答已采纳
下面是应该呈现“凸起”纸按钮的代码：
所有代码都在一个脚本标记中，并呈现一个没有引发的纸按钮(见屏幕快照)。我可以点击和看到的涟漪效应，似乎完美除了外观。
更新:目前，获得正确呈现的唯一方法是替换
测试
通过
有办法避免这种“危险”的方式吗？
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel=&
浏览 3提问于2015-03-30得票数 0
回答已采纳
如有任何指示，将不胜感激。我是新的反应，JSX和Babel，我只是想让一些基本的工作。我已经做了很长一段时间了，我已经到了死胡同。
这是我的html页面：
<!DOCTYPE html>
<html>
<head>
<title>Test React</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini
浏览 3提问于2017-09-29得票数 2
1回答
我得到的是价格。我以为我正确地使用了html_attr()函数，但显然我遗漏了一些东西。
我得到了marca和product字段，但没有从这个HTML中获得价格：
<li data-internet-price="2,899" class="jsx-3342506598 price-0">
<div data-variant="DESKTOP_LIST" class="jsx-3342506598 cmr-icon-container">
<span id=""
浏览 3提问于2021-09-16得票数 0
我有一个奇怪的问题，但到目前为止，我还没有发现有人在问这个问题。 如果我尝试用jsx有条件地呈现一个类名，我会这样做： <input
{...input}
type={type}
className="form__input"
classname={boolean ? "boo" : null}
/> 对于像"disabled“这样的布尔型属性，这似乎不起作用。例如： <input
{...input}
type={type}
className="form__input"
{disabled ? "dis
浏览 29提问于2019-02-11得票数 1
回答已采纳
2回答
在WebStorm中是否有用于Hyperapp支持的插件，或者设置intellisense以避免出现错误？
当前，编辑器将组件视为React组件，这是非常接近的，但并不理想。
更新：
类似于Preact，Hyperapp使用的是class而不是className。
JS版本设置为ES6的屏幕截图：
JS版本设置为响应JSX的屏幕截图：
浏览 0提问于2018-08-16得票数 0
回答已采纳
我试图从我的html中引用一个jsx文件，但呈现函数没有显示任何内容，控制台中也没有任何错误。
*注意-我改变了下面的fb CDN链接，因为这样就不允许它们了。CDN链接不是问题所在。
我的代码如下所示：
<html>
<head>
<script src="https://f*b.me/react-0.14.6.js"></script>
<script src="https://f*b.me/react-dom-0.14.6.js"></script>
&l
浏览 2提问于2016-09-29得票数 1
回答已采纳
2回答
我有以下JSX示例，它是一个SVG元素：
<svg className={className} viewBox="0 0 48 48" version="1.1"
onClick={this.props.onClick} aria-label="Some random label">
<g fill="none">
<line strokeWidth="2" x1="24" y1="14" x2="24" y2="
浏览 4提问于2015-11-28得票数 4
回答已采纳
在浏览器的cosole中，我得到了以下错误：
Uncaught Error: Cannot find module "./users/UserSection.jsx"
然而，我已经查看了我的UserSection文件和目录中的任何语法或错误，并且我无法确定为什么它找不到模块。
下面是UserSection.jsx组件：
import React, {Component} from 'react';
import UserForm from './UserForm.jsx';
import UserList from './UserList
浏览 4提问于2016-11-24得票数 0
回答已采纳
这是否有可能使用JSX属性，没有绑定器？(仅使用加载在标记中的HTML )
index.html文件：
<html lang="en">
<body>
<div id="root"></div>
<script src="react.development.js" crossorigin></script>
<script src="react-dom.development.js" crossorigin></
浏览 0提问于2022-02-01得票数 -2
回答已采纳
1回答
让我们假设我有一个小的JS库，它对…使用自定义的HTML属性做一些特定的任务。就像my-support-tag="blahblah"一样。
我注意到，只需在Webstorm的设置中导入一个缩小的Angular js文件作为JS库，我就会获得属性自动完成功能，所有ng-*属性都会在编辑HTML文件时显示出来。
如何创建一些存根或支持文件或任何我需要的东西，以便Webstorm也为我自己的带my-前缀的HTML属性提供自动完成支持？
谢谢!
浏览 2提问于2015-08-11得票数 0
我是否可以将html5数据属性放入html标记本身或放入头部的其他标记中？
<html xmlns="http://www.w3.org/1999/xhtml" class="no-js" data-directory='{json data}'>
<script type="text/javascript" src="xxx/ready.js" data-directory='{json data}'></script>
这些被认为是无效的吗？
浏览 0提问于2013-07-21得票数 0
回答已采纳
React.cloneElement()总是要求第一个参数作为react组件，它应该作为道具中的子元素传递。
是否有方法将简单的HTML节点作为子节点传递。为了更好地理解我的问题，请参考下面的代码：
Dialog.jsx (公共组件)：
return (
<div className="app-dialog-jsx" ref={(ele) => this.ele = ele}>
{this.state.show && React.cloneElement(this.props.child
浏览 2提问于2018-02-22得票数 1
回答已采纳
我目前正在尝试组合一个简单的Illustrator插件，来自一个设计背景，这被证明是一个相当的任务，我有JS的经验，但没有Flex的经验。
我想做的是在Illustrator中有一个面板，有一个输入字段和一个按钮。您在输入中键入内容并按下按钮，包含所需文本的文本框架就会添加到画布中。
但是如何将mx: to输入中的值传递给Controller.as文件呢？我在网上找不到答案。
这是我的main.mxml文件：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=
浏览 0提问于2012-07-25得票数 0
回答已采纳
2回答
我知道我可以用v-bind动态地为属性设置一个值，但是我希望动态地添加属性，而不是这个值。类似的内容(虽然这是无效的)：
<a
:href="url"
{{ downloadable ? 'download' : null }}
class="link"
@click="onClick">
{{ text }}
</a>
注意:我没有使用JSX
我正在考虑使用$attrs ()，但它是只读的。
有办法在Vue身上这样做吗？
解决方案
浏览 0提问于2018-08-16得票数 1
回答已采纳
JSX工厂：
function h(type: string, _props, ..._children): HTMLElement {
return document.createElement(type); // breakpoint here is hit
}
tsconfig.json：
"jsx": "react",
"jsxFactory": "h"
在.tsx文件中的用法：
const element = <div></div>; // = any
TypeScript似乎没有推断出J
浏览 3提问于2018-12-31得票数 2
回答已采纳
所以我现在的问题是，如果我有一个父组件是JSX，但是我需要包含一个html标签，比如<i class="fa fa-window-maximize" aria-hidden="true"></i>，我认为react jsx不支持它(如果我错了，请纠正我)，我可以如何混合jsx和非jsx组件吗？我个人更喜欢JSX，并且在没有JSX的情况下我没有做过任何工作，所以除非迫不得已，否则我不想偏离这个方向。
<Parent>
<Child>
Mix non jsx code in here??
<
浏览 4提问于2017-02-13得票数 1
1回答
我正在尝试在一组复选框上实现必需的验证。基本上，需要选中其中一个，并且复选框的数量是动态的。我对下面的代码不是很有信心，我开始假设我可能需要使用Javascript。我认为代码本身就是最好的说明。
HTML：
@for (var i = 0; i < Model.Sessions.Count(); i++ )
{
@Html.HiddenFor(it => it.Sessions[i].Id)
@Html.LabelFor(it => it.Sessions[i].Name, Model.Sessions[i].Name)
浏览 6提问于2012-06-06得票数 2
我有一个由html文件组成的应用程序，如下所示：
<!-- ... existing HTML ... -->
<div id="input-field"></div>
<!-- ... existing HTML ... -->
<!-- Load React. -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<scri
浏览 1提问于2022-04-27得票数 1
回答已采纳
我是新来的。
我正在尝试使用renderToStaticMarkup呈现组件(jsx)，但我得到了以下错误：
错误：
Invariant Violation: Invalid tag: <html data-reactroot="" data-reactid="1" data-re....
server.js (片段)
var html = ReactDOMServer.renderToStaticMarkup(
React.createElement(
ReactDOMServer.renderToStri
浏览 6提问于2016-10-06得票数 0
5回答
我正在做一个遵循这个结构的React项目。
src |
components |
Footer |
index.jsx
styles.scss
Header |
index.jsx
styles.scss
scss |
helpers.scss
variables.scss
...
main.scss
在我的变量文件中，我使用了css自定义变量，所以，它们都在:root上，我可以在我的组件样式中访问它们。
当我想创建深色时，我想使用SCSS函数darken，但它不评估它们，并
浏览 26提问于2018-10-20得票数 16
我正试图开始在ReactJS中建立一个网站。但是，当我试图将JS放在一个单独的文件中时，我开始得到这个错误："Uncaught :意外令牌<“。
我尝试将/** @jsx React.DOM */添加到JS文件的顶部，但它没有修复任何问题。下面是HTML和JS文件。对出了什么问题有什么想法吗？
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
浏览 6提问于2015-01-22得票数 150
回答已采纳
当出现客户端UI错误时，NextJS呈现自定义错误页(_error.jsx) .是否可以在自定义错误页面中获取有关错误的信息？
我正在使用一个定制的应用程序：
// pages/_app.jsx
import App from 'next/app'
function CustomApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
CustomApp.getInitialProps = async (props) => {
{ Component, ctx }
浏览 3提问于2022-04-21得票数 1
回答已采纳
2回答
我使用顺风css来构建我的nextjs应用程序，所以我从顺风ui复制这个模板，它说要让它正常工作，我必须..。
{/*
This example requires updating your template:
```
<html class="h-full">
<body class="h-full">
```
*/}
我不知道我要更新的东西在哪里。我的tailwind.config.js就是这样的，
module.exports = {
content: [
浏览 12提问于2022-01-27得票数 1
2回答
当jsx跨越多行时，哪个eslint规则会优先于前者？目前，prettier正在将首选更改为notPreferred
const preferred = (
<tag
prop={hi}
another={test}
\>
);
const notPreferred = (<tag
prop={hi}
Another={test}
\>
);
浏览 0提问于2019-06-21得票数 6
我正在学习反应，所以这个问题可能没有任何意义，但我想学习它。
我有index.html页面，我想跳转到Components.html页面。
RouteToComponent.jsx
import React from 'react';
class RouteToComponents extends React.Component {
render() {
return (
<div>
<a href="Components/Components.html">
浏览 3提问于2020-04-11得票数 1
我正在建一个Gatsby网站。该站点由多个React“页面组件”组成，所有这些组件都包装在一个React页眉组件和一个React页脚组件中。
我有一些预先存在的静态HTML (想想隐私策略和c)。我打算把它们发布到/public的gatsby文件夹中。但是这样就不会有React页眉组件和页脚组件了。
我如何发布我的静态HTML内容并为它们提供React页眉/页脚？
我想，如果我把我的静态HTML“翻译”成JSX，那当然就行了。我只想知道这是唯一的方法，正确的方法，还是有更简单的方法？
浏览 1提问于2018-06-20得票数 1
3回答
你好，
我有一个React应用程序，我正在使用axios获取Blogger API。在响应中，有一个content属性。它包含HTML，但在如下字符串中：
{
"content": "<div> some content </div>"
}
因此，我使用react-html-parser包将其转换为JSX。
问题是，我想从这个<img/> JSX中获取第一个content，并且只显示它-隐藏其他元素。
我试着为*设置*，为img设置display: block，但是没有任何可见的东西--包括图像。
浏览 5提问于2020-07-08得票数 3
回答已采纳
我有几个.md文件(包含长文本)，我想通过react呈现它们。我尝试使用markedown it，但是加载程序返回一个错误。下面是webpack.config.js文件：
var path = require('path');
var webpack = require('webpack');
var subscript = require('markdown-it');
var superscript = require('markdown-it');
module.exports = {
entry: ['.
浏览 7提问于2016-02-19得票数 3
我用Webpack来回应JSX。我的应用程序上有一个部分，里面有很多来自设计师的静态内容。他们通常给我发送一个HTML文件，其中包含我需要发布的内容。
目前，我正在手动将这些HTML转换为JSX (通过危险地设置HTML)。
问题：Webpack中是否有一个加载程序可以自动转换HTML文件以响应JSX？
浏览 1提问于2015-03-30得票数 2
回答已采纳
在babel-loader中有一个选项。我不知道如何在下面的webpack设置中使用它：
var compiler = webpack( {
context: path.resolve( __dirname + "/../../" + rootModuleDir + "/" + modules[ module ] ),
entry: "./index.jsx",
resolve: {
root: path.resolve( __dirname + "/../../assets/js/lib/reac
浏览 2提问于2015-04-21得票数 24
回答已采纳
当然，我正在尝试通过合并Foundation来完成"Todo“应用程序的示例。我有三个有问题的组件: TodoList.jsx、Todo.jsx和TodoModal.jsx。
我想要的是在todoList中显示在每个待办事项下面的链接，以弹出一个带有todo内容的模式。我的问题是:我可以启动Modal，但相同的Modal会弹出，不管我点击的是哪个要做的链接。似乎我无法更新TodoModal.jsx中的道具，并且可能是组件生命周期中的React，但我确实需要进一步的帮助。我刚上了一门在线反应课程，所以我还是新手。任何帮助都是非常感谢的！
下面是TodoList.jsx (向TodoMod
浏览 1提问于2016-06-22得票数 0
回答已采纳
我试图将一个用于jsx模板名的字符串传递给一个组件，该组件只负责在没有交互的情况下只呈现基本的html组件(我们有很多)。
'use strict';
import React from 'react';
export default class TemplateLoader extends React.Component {
displayName = 'TemplateLoader'
constructor(props) {
super(props);
}
render() {
var template
浏览 1提问于2015-06-04得票数 0
回答已采纳
我可以使用什么模式在MVC 2视图上显示与单个属性无关的错误？
例如，当我调用一个web服务来处理表单数据时，web服务可能返回一个错误或抛出一个异常。我想显示该错误的用户友好版本，但没有逻辑方法将错误与模型的任何给定属性相关联。
更新：
尝试按建议使用此代码，但未显示摘要消息：
MyPage.spark：
Html.ValidationSummary(false, "Oopps it didn't work.");
主计长：
ViewData.ModelState.AddModelError("_FORM", "My custom error
浏览 1提问于2010-09-24得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
