标签: react-dom
通过事件响应改变输入类型
我正在尝试扩展一个 React 输入组件，该组件需要输入密码，并且在其旁边的元素或元素发生特定事件之后 - 它需要切换输入的类型（type =“text/password”）。
React 如何处理这个问题？
我将其作为我的组件的类：
import { React, Component } from 'lib'
export class PasswordInput extends Component {
constructor(props, context){
super(props, context)
const { type, validate, password } = this.props
if(context.onValidate && password) {
context.onValidate(password, validate)
}
if(context.showHide && password) {
context.onValidate(password, validate)
}
}
render() {
let inputType = 'password'
return (
<div className="form">
<label htmlFor="password">{ this.props.label }</label>
<input {...this.constructor.filterProps(this.props)} type={ inputType } />
{ this.props.touched && this.props.error && <div className="error">{ this.props.error }</div> }
<button …推荐指数
解决办法
查看次数
React Router 只渲染一条路由
我是 React 和 React-router-dom 的新手。我已经花了几个小时了，但我却陷入了死胡同。
我正在使用 create-react-app 和 bulma 作为 css。我的依赖项：
"dependencies": {
"bulma": "^0.7.1",
"font-awesome": "^4.7.0",
"node-sass-chokidar": "^1.3.3",
"react": "^16.5.2",
"react-bulma-components": "^2.1.0",
"react-dom": "^16.5.2",
"react-fontawesome": "^1.6.1",
"react-router-dom": "4.3.1",
"react-scripts": "2.0.4"
},
我查看了 stackoverflow、create-react-app 文档上的所有相关问题，并在其存储库中搜索了他们的开放问题部分，用谷歌搜索了每个可能的关键字。我不知所措。
我的路由器只会渲染一条路线（Homeroute）。
我如何让它也显示“/create”路线？
我试过了：
- “精确”和“严格”属性的组合
- 用 <div> 包裹 <BrowserRouter> 或 <HashRouter> 之后的所有内容
- 尝试使用 <Switch> 来（取消）包装 <Route>
尝试了 BrowserRouter 和 HashRouter
Run Code Online (Sandbox Code Playgroud)import React, { Component } from "react"; import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom"; const Home = () => { return (<h2>This is …
推荐指数
解决办法
查看次数
当 Babel 动态附加时，动态附加的 JSX 不会被 Babel Standalone 转译
当 Babel Standalone 作为 SCRIPT 标签的 SRC 属性提供时，Babel Standalone 可用于动态附加的 JSX 代码。当使用 JavaScript 将其附加到 DOM 时，它不起作用。对于 React 库来说情况并非如此，当动态附加 React 库时，它可以与动态附加的 JSX 一起正常工作。
首先，这是 JSX 文件 (react.jsx)：
class HelloMessage extends React.Component {
render() {
return <h1>Hello</h1>;
}
}
ReactDOM.render(<HelloMessage/>, document.getElementById('app'));
接下来，这是使用它的 HTML。请注意，React 库和 JSX 文件是动态添加的；这工作正常。但是，Babel Standalone 仅在将 Babel Standalone 添加为 SCRIPT 元素的 SRC 时才转译 JSX，而不是在使用附加 JS/JSX 其余部分的相同 JavaScript 进行附加时转译。通过重新删除一个 Babel Standalone 调用并取消重新删除另一个来在两种状态之间切换。我想动态附加 Babel Standalone...有什么问题吗？
<!doctype html>
<html>
<head>
<title>Inscrutable Babel Problem</title>
</head>
<body>
<div>
<p>Babel works only when added as a …推荐指数
解决办法
查看次数
类型错误：渲染不是函数 updateContextConsumer
我是 ReactJs 的新手，正在尝试学习 ContextAPI，但我遇到了这个错误。我阅读了有关这种情况的标题，但无法找到解决方案。首先，我尝试将 React 作为旧版本重新安装，但没有t 改变了。我试图将 App 包装在 app.js 而不是 index.js 中，但我得到了与现在相同的结果。
应用程序.js
import React, { Component } from 'react'
import './App.css';
import UserFinding from './components/UserFinding';
class App extends Component {
render() {
return (
<div>
<UserFinding/>
</div>
)
}
}
export default App;
用户查找.js
import React, { Component } from 'react'
import User from './User.js'
import UserConsumer from '../context.js'
export default class UserFinding extends Component {
render(){
return(
<UserConsumer>
{value=>{
const users=value;
return(
<div>
{
users.map(user=>{
return(
<User …推荐指数
解决办法
查看次数
如何使用 Hooks API 在 React 中避免不必要的渲染
请跟随我的代码段下面，当我点击任何按钮（添加，编辑，删除）我所有的部件得到重新渲染，包括Title它没有成分props或stats。如果我有几个组件可能没问题，但假设我有超过15 个或更多的组件来获取/保存数据，这是可以的还是应该避免？
我尝试使用useCallback钩子（使用handleRemove），但显然这不能按预期工作。
const Button = ({ title, count, onClick }) => {
console.log(`Rendering ${title}`)
return (
<button onClick={onClick}>
{title} ({count})
</button>
)
}
const Header = () => {
console.log("Rendering Title")
return <h1>App Title</h1>
}
const Parent = () => {
const [add, setAdd] = React.useState(0)
const [edit, setEdit] = React.useState(0)
const [remove, setRemove] = React.useState(0)
const handleAdd = () => setAdd(add + 1)
const …推荐指数
解决办法
查看次数
类型错误：react__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数
我正在使用 React 中的 Context API 制作一个待办事项应用程序。在启动开发服务器时，它抛出错误：
类型错误：react__WEBPACK_IMPORTED_MODULE_0___default(...) 不是函数
我是 React 的初学者，无法找出发生此问题的任何可能原因。这是我的App.js：
import React, {useReducer} from 'react';
import Container from "reactstrap/lib/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';
import {TodoContext} from './Context/TodoContext';
import todoReducer from "./Context/reducer";
const App = () => {
const [todo, dispatch] = useReducer(todoReducer, [])
return(
<TodoContext.Provider value={{todo, dispatch}}>
<Container fluid>
<h1>
Todo App with Context API
</h1>
</Container>
</TodoContext.Provider>
)
}
export default App;
我^16.3.1同时使用react和react-dom
推荐指数
解决办法
查看次数
React JS：意外使用“事件”无限制全局变量
我将 nameChangedHandler 方法作为对已更改属性的引用传递，并最终传递给我在此处未提及的 person 组件，但我在事件对象中收到错误。
class App extends Component {
state = {
persons: [
{id: 'abc', name: "Max", age: 28},
{id:'def', name: "Suzi", age: 30},
{id:'fgh', name: "Alex", age:33}
],
otherState: 'some other value',
showPersons: false
}
nameChangeHandler = (event) => {
this.setState({
persons: [
{name: "Max", age: 28},
{name: event.target.value, age: 30},
{name: "Alex", age:26}
]
}
);
}
display_persons = (
<div>
return <Person
changed={()=>this.nameChangeHandler(event)} />
</div>
);
}
return(
<div className="App">
{display_persons}
</div>
);
}
} …推荐指数
解决办法
查看次数
为什么我收到此错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用/
错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：
- 您的 React 和渲染器版本可能不匹配（例如 React DOM）
- 你可能违反了 Hooks 规则
- 您可能在同一个应用程序中拥有多个 React 副本
这是我的 App.js 代码
import './App.css';
import Header from './Header'
function App() {
return (
<div className="app">
< Header />
</div>
);
}
export default App;
header.js代码
import React from 'react'
import './Header.css';
import PersonIcon from '@material-ui/icons/Person';
import IconButton from '@material-ui/core/IconButton';
function Header() {
return (
<div className='header'>
<IconButton>
<PersonIcon fontSize="large" className="header__icon" />
</IconButton>
</div>
)
}
export default Header
我在index.js中使用了我的App.js
import React from 'react';
import ReactDOM from 'react-dom'; …推荐指数
解决办法
查看次数
有没有办法避免在 React 中出现两个“根”元素？
通常，您必须在模板中放置一个根元素，例如<div id="root"></div>. 然后使用 React/jsx，将组件（及其子组件）渲染到root. 该组件（渲染时）可能如下所示<div id="main-wrapper">。最终渲染将有两个根，一个称为 root，一个称为 main-wrapper。有没有更干净的方法来使用 React 进行渲染？
而不是这个：
<div id="root">
<div id="main-wrapper>
<section></section>
<section></section>
. . .
</div>
</div>
我可以这样做吗？
<div id="root">
<section></section>
<section></section>
. . .
</div>
推荐指数
解决办法
查看次数
尝试导入错误：“useLocation”未从“react-router-dom”导出
React version:
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-router-dom": "5.0.1",
"react-scripts": "3.4.0",
js代码为
import {useLocation} from "react-router-dom";
const location = useLocation();
...... 哪里有问题 ？
推荐指数
解决办法
查看次数
标签 统计
react-dom ×10
reactjs ×10
javascript ×5
jsx ×3
babeljs ×2
react-hooks ×2
react-router ×2
api ×1
context-api ×1
css ×1
ecmascript-6 ×1
html ×1
mern ×1
usecallback ×1