React，如何输出原始的`null`和`unfined`以及空字符串`''`？
在React中，输出原始的null和undefined以及空字符串''可以通过以下方式实现：
- 输出
null：直接将null作为组件的内容进行渲染即可。
ReactDOM.render(null, document.getElementById('root'));- 输出
undefined：在React中，不能直接将undefined作为组件的内容进行渲染，因为React要求组件的内容必须是一个有效的React元素。但可以通过条件判断来实现输出undefined的效果。
const value = undefined;
ReactDOM.render(value !== undefined ? value : 'undefined', document.getElementById('root'));- 输出空字符串
''：将空字符串作为组件的内容进行渲染即可。
ReactDOM.render('', document.getElementById('root'));需要注意的是，以上方法只是在React中输出对应的值，并不涉及具体的业务逻辑。具体的应用场景和推荐的腾讯云相关产品和产品介绍链接地址需要根据实际需求进行选择和使用。
相关·内容
1回答
在Reactjs中渲染jsxVarible和jsxComponet的区别
reactjs、react-dom
下面是我的具有jsx代码的jsxVarable
let JsxVarible = (
<div>
<h1>Hello this is from Jsx</h1>
</div>
)
ReactDOM.render(JsxVarible, document.getElementById("app"));
EveryThing工作正常
let JsxComponent = () =>(
<div>
<h1>We are rendering the JsxCompon
浏览 0提问于2020-04-24得票数 0
3回答
在变量中声明表单时，响应错误
javascript、html、reactjs
我在做反应。我刚刚创建了一个名为Input.jsx的组件
import React from "react";
const Input = (label, placeholder) => {
return (
<label htmlFor={label}>
{label}
<input type="text" placeholder={placeholder} />
</label>
);
};
export default Input;
我导入它并在index.js中
浏览 2提问于2020-10-03得票数 1
回答已采纳
3回答
我是一个棱角分明的开发人员，我刚刚开始使用探索react。
我刚刚添加了CDN脚本标记，以便在React.createElement中进行反应，并开始探索HTML。
// jsx
var e2 = <div>hello</div>;
// babel generated script
var e2 = React.createElement(
"div",
null,
"hello"
);
ReactDOM.render(e2, document.getElementById('root'));
浏览 0提问于2019-01-01得票数 1
回答已采纳
1回答
在呈现过程中，为什么要在React.createElement中包装功能组件，而不是通过函数调用使用其返回的元素呢？
reactjs、components、react-dom
const App = () => {
return React.createElement(
"div",
{},
React.createElement('h1', {}, "Adopt The Pet"))
}
}
ReactDOM.render(App(), document.getElementById("root")); // this works
// vs
ReactDOM.render(React.createElement(App), document.getElementBy
浏览 2提问于2021-07-24得票数 3
1回答
所有React路由器和hashHistory路由重定向到同一组件
node.js、reactjs、express、react-router
我尝试在我的MERN堆栈应用程序上使用React Router遇到了问题，因为所有路由都呈现相同的组件
路由器(index.jsx)：
import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'
import Home from './components/home.jsx'
import App from './app.jsx
浏览 1提问于2017-04-30得票数 1
3回答
真的需要reactDOM.render()吗？
reactjs
我有个问题。我一直在我工作的公司开发React组件，从未真正使用过reactDOM.render()函数。(除了在INDEX.JS内部：
ReactDOM.render(
<App />, document.getElementById('root'));
为什么在其他地方需要它？为了渲染到下面的组件？
import React from 'react';
class Compo extends React.component {
render() {
return <div />
}
export default Compo;
浏览 4提问于2018-07-16得票数 2
1回答
流星导出集合以反应组件
meteor、reactjs
此Meteor代码无法在浏览器中显示来自mongo集合CarsCol的数据。
我做错了什么？谢谢
// /imports/api/collections.js
export const CarsCol = new Mongo.Collection('carsCol');
// /imports/ui/myList.jsx
import React from 'react';
export const ListItems = ({listItems}) => { //<---- {listItems} undefined
if (lis
浏览 4提问于2016-09-01得票数 0
回答已采纳
1回答
创建-反应-应用程序的index.js文件如何能够解析JSX？
reactjs、jsx、create-react-app
使用create-react-app创建站点后，可以看到JSX在index.js文件中使用ReactDOM.render()方法呈现。
那么，怎么可能仍然在该方法之外解析JSX，如下所示：
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
const jsxArray = [
<div>test</div>,
<div>test</div>,
浏览 2提问于2021-09-07得票数 0
回答已采纳
3回答
为什么我的React组件不能多次渲染？
reactjs
我正在温习一些反应，但我有一个问题与多重渲染。
我有一个List组件，它接受一个"content“数组，并从它构建一个列表。
我希望它渲染3-4次相同内容的相同列表，如下所示。
但是，它实际上只呈现了其中一个列表...
为什么它不能做我想做的事情呢？
我尝试使用循环，并在每个循环上添加不同的关键属性(i的值)等，但不幸的是，我读过的大多数文章都相当令人费解和无用。
下面是我当前的代码：
//main.jsx
const React = require("react");
const ReactDOM = require("react-dom");
c
浏览 3提问于2016-09-04得票数 0
回答已采纳
5回答
当我们使用ReactDOM.render(<Component/>,document.getElementById("container"));时，组件会呈现到前面提到的元素中。如果这里的div中已经有一些已存在的内容，该怎么办呢？React可以将渲染的组件追加到它上面吗？例如：
HTML：
<div id = "container">Hello, React!</div>
JSX：
var Component = React.createClass({
render: function(){
浏览 6提问于2016-06-03得票数 12
1回答
与香草JS反应的组件内部
javascript、reactjs
根据命运的意愿，我必须使用react.js，只使用ES3标准。所以，jsx，类和其他的东西。
使用React.createClass和React.createElement，我成功地设置了一个交互式输入组件，该组件将输入文本反映到输入字段的标签上。
这方面的代码如下：
requirejs.config({
// module name mapped to CDN url
paths: {
// Require.js appends `.js` extension for you
'react': 'https://unp
浏览 3提问于2017-12-26得票数 0
回答已采纳
1回答
通过React.js渲染多个类/对象？
javascript、reactjs、react-dom
在一个React文件中，我有以下内容：
ReactDOM.render(
<BlogButton />,
document.getElementById('nav-blog--react')
);
ReactDOM.render(
<NavButton />,
document.getElementById('nav-home--react')
);
ReactDOM.render(
<PoweredByButton />,
document.getElementById(
浏览 0提问于2016-01-22得票数 1
3回答
React不会呈现多个组件
reactjs
组件1:只有在独立的时才会呈现
const React = require('react');
class URI extends React.Component {render() { return <h1>URI</h1>; }}
module.exports = URI;
组件2:正确呈现，但当放置在之前时消失
const React = require('react');
class CONTAINER extends React.Component {render() { return <div style={{back
浏览 1提问于2019-04-27得票数 1
2回答
React导入导致无法解决模块说明符"react“
reactjs
说我笨(我不会把它当回事)，但我已经3年多没有使用过反应了，我的脑细胞肯定已经死了。
我发现了一个错误：
localhost/:1 Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
我确信这与我如何使用Chrome中的导入有关。
index.html
<head>
<meta charset="
浏览 1提问于2019-04-15得票数 7
回答已采纳
2回答
反应中的元素操纵
javascript、reactjs
因此，我有一系列代码，其中Header.jsx文件中有一个按钮，如果单击，它将显示Notification.jsx文件的内容。这里的问题是，我不知道如何在index.js中显示index.js的内容。我尝试使用条件语句，单击按钮后是否可以隐藏h1元素？
Header.jsx
import React from "react";
import { Button } from "@mui/material";
import { IconButton } from "@mui/material";
import NotificationsIcon fr
浏览 7提问于2022-03-15得票数 -1
4回答
用条件渲染问题对简单输入字段进行反应
javascript、reactjs、conditional-statements
我正在读戴夫·塞迪娅的一本书“纯粹的反应”，下面是一个我被困住的问题，我很感激任何尽可能简单的解决方案，谢谢。
问题:从该组件返回适当的JSX，以便当用户名未定义或为null时，它将呈现“Not登录”。当用户名是字符串时，呈现“Hello，username”
我的答案是：
import React from 'react';
import ReactDOM, { render } from 'react-dom';
function Greeting(){
render(){
let username = '';
let gre
浏览 0提问于2020-08-08得票数 0
回答已采纳
3回答
将参数从非react jquery html表单页面传递到react应用程序
javascript、reactjs
我是reactJS的新手。我有一个简单的react应用程序，可以独立运行。
现在我正在从现有的HTML页面调用它，并希望将一个参数传递给react应用程序，并在react应用程序中使用该参数。
我用谷歌搜索了一下，发现可以在react应用程序中设置和选择窗口环境变量。
我该怎么做？有什么想法或样品吗？
谢谢!
Here is my scenario,
<html>
...
<body>
...
<a href="http://server.com/reactapp/index.html">call react app</a>
&
浏览 1提问于2018-08-22得票数 0
1回答
如何使中继和响应路由工作正常？
reactjs、react-router、relayjs、react-router-relay
我从中继开始，并试图使我的路由工作正常。不幸的是，我运气不太好。
下面是我遇到的错误：
Uncaught : Component.getFragment不是函数
下面是我的代码，供您参考：
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Relay from 'react-relay';
import {Router, Route, IndexRoute, browserHistory} from 'react-router
浏览 4提问于2016-04-18得票数 4
回答已采纳
1回答
用CSHTML渲染转换的ES6
javascript、reactjs、jsx
我有过
Tutorial.jsx
class ShoppingList extends React.Component {
render() {
return (<div>Milk</div>);
}
}
export default ShoppingList;
webpack.config.js
module.exports = {
...
output: './React/bundle.js',
...,
module: {
loaders: [
浏览 3提问于2017-01-29得票数 0
回答已采纳
8回答
基本React示例出错:未捕获TypeError:未定义不是函数
javascript、reactjs、react-jsx、react-rails
我正在尝试将react连接到我的应用程序中。这是一个使用rails-react的rails应用(尽管我不认为这是问题的一部分)。我目前使用的是一个非常简单的1组件设置：
// react_admin.js.jsx
/** @jsx React.DOM */
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
<
浏览 0提问于2014-10-29得票数 33
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
