标签: react-dom
React 和 React-Dom 版本应该匹配吗？
React 和 React-Dom 必须是同一个版本吗？
我们应用程序中的示例：
React v 15.0.2，React-Dom v 15.3.1
直到最近，我们的应用程序中的一切都运行良好，我们遇到了一个奇怪的错误。
Type Error: Cannot read property 'getNativeNode' of null (ReactReconciler)
推荐指数
解决办法
查看次数
React.renderComponent不是函数
我已经为初学者阅读了一些关于ReactJs的文章.我读过的文章只显示了代码片段.我的第一个组件出现问题:
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function () {
return React.DOM.h1("hello world!!");
}
});
React.renderComponent(
HelloWorld,
document.getElementById("content")
);
</script>
</body>
</html>
当我打开页面时,我看到了 embedded:11 Uncaught TypeError: React.renderComponent is not a function
有谁能指出我正确的方向？
我也试过这个没有运气:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>-->
<meta charset="UTF-8">
<title>HELLO WORLD</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var HelloWorld = React.createClass({ …推荐指数
解决办法
查看次数
react-dom渲染:直接模块导入
有没有办法为ReactDOM的render方法进行直接模块导入以最小化束大小？
例如,此直接模块导入适用于findDOMNode:
import findDOMNode from 'react-dom/lib/findDOMNode';
......但这不是:
import { render } from 'react-dom/lib/ReactMount';
推荐指数
解决办法
查看次数
删除项目后反应列表呈现错误数据
我有一个简单的学生对象列表,其中包含姓名和状态分数.
他们的名字是必然的<b>{student.name}</b>,他们的分数是必然的
<input type="text" defaultValue={student.score}/>
什么时候我想从这个列表中删除第一个学生并通过调用set state重新渲染组件
第二个学生的输入标签显示第一个学生的分数而不是自己的分数.为什么这会发生在我做错的地方？
这里是我的代码,这里是jsbin中的mycode
class App extends React.Component{
constructor(){
super();
this.state ={
students:[{name:"A",score:10},{name:"B",score:20},{name:"C",score:30}]
}
}
onDelete(index){
this.state.students.splice(index,1);
this.setState(this.state);
}
render(){
return(
<div>
{this.state.students.map((student,index)=>{
return(
<div key={index}>
<b>{student.name}</b> - <input type="text" defaultValue={student.score}/>
<button onClick={this.onDelete.bind(this,index)}>delete</button>
</div>
)
})}
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("main"));
推荐指数
解决办法
查看次数
警告:React.createElement:type无效 - bundle.js
我正在学习React JS的教程,一切都很好,几天我可以运行一个例子,简单,执行推荐的基本配置,再添加一些我添加的附加组件来识别Javascript版本.
几天不再审查项目,但它正常工作,执行命令时,我没有看到任何错误,但它没有在浏览器中显示任何内容,只有多个错误出现在这个控制台中.
我已经卸载并重新安装了reac和react-dom,问题仍然存在,尝试从朋友那里克隆它的新项目,它正常工作,它只复制了我的相同结构.
问题
警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件,或者您可能混淆了默认导入和命名导入.
上述错误发生在您的某个React组件中:考虑向树中添加错误边界以自定义错误处理行为.
应该注意,错误出现在文件中bundle.js,用于存储生成的代码webpack
的package.json
{
"name": "prueba",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node server.js",
"dev": "concurrently \"node server.js\" \"webpack -w\" "
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"serve-static": "^1.13.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.5.1",
"eslint": "^4.9.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.7.0",
"webpack": "^3.10.0"
}
}
webpack.config.js
const path = require('path'); …推荐指数
解决办法
查看次数
重定向到错误页面ReactJS和react-router
当应用程序中断时，我试图将用户发送到通用错误页面，我正在尝试使用ErrorBoundary方法，然后呈现重定向。
export default class ErrorBoundary extends Component {
state = { has_error: false }
componentDidCatch(error, info)
this.setState({ has_error: true });
}
render() {
if (this.state.has_error)
return <Redirect to="/somewhere/else" />
}
return this.props.children;
}
};
然后使用ErrorBoundary将所有路由和子组件包装在路由器内部
<Router history={history}>
<ErrorBoundary>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route
path="/createManager/:managerId"
component={CreateManager}
/>
<Route path="/login" component={LoginComp} />
<Route path="/test" component={Test} />
<Route path="/register" component={RegisterAccount} />
<Route component={NotFound} />
</Switch>
<Footer />
</ErrorBoundary>
</Router>
永远不会触发componentDidCatch，因此，无论是在开发版还是产品版中，都永远不会离开当前错误页面。当应用中断或尝试引发错误时，如何将用户发送到X路由？
为了触发错误，我给一个组件留了一个空道具，然后单击以尝试使用应该在道具中传递的函数。
推荐指数
解决办法
查看次数
Material UI与React 16的兼容性为0.2x
尝试从React 15.4升级到React 16.4.1(也将react-dom升级到16.4.1)后,我从路由器收到此错误消息:
TypeError: _nextProps.children is not a function
at ReactDOMServerRenderer.render (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2491:55)
at ReactDOMServerRenderer.read (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2354:19)
at renderToString (/var/www/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2726:25)
at render (/var/www/web/server/routes/others.jsx:141:24)
at process._tickCallback (internal/process/next_tick.js:68:7)
代码:
const render = () => {
const body = renderToString(
<MuiThemeProvider muiTheme={muiTheme}>
<ThemeProvider theme={theme}>
<Provider store={store}>
<IntlProvider>
<RouterContext {...renderProps} />
</IntlProvider>
</Provider>
</ThemeProvider>
</MuiThemeProvider>
);
render 在此处定义,但之后在相同的路由文件中返回:
Promise.all(prefetchData(renderProps, store))
.then(render)
.catch(prefetchError => next(prefetchError));
我按照建议的说明从React 15.x升级到React 16.x.
自从我发现有关材料与React 16的兼容性的相关问题:
https://github.com/mui-org/material-ui/issues/8434
https://github.com/mui-org/material-ui/issues/7795
我想知道这个错误信息是否可能是由材料-ui 0.2x和React 16.x之间的不兼容引起的,或者换句话说,我想知道是否有必要升级到material-ui 1.x以便能够使用React 16.x.
推荐指数
解决办法
查看次数
当使用水合物而不是反应堆渲染时检测破损的图像
我们正在一个项目中使用hydrate，react-dom并且很难检测到损坏的图像链接。这些图像来自第三方API，因此我们无法事先知道哪些链接有效。
export default class Image extends PureComponent {
render() {
return (
<img
src={this.props.src}
onError={(e) => {
e.target.src='https://mycdn.com/fallback.jpg';
}}
/>
)
}
}
如果我们使用render而不是，上述代码将起作用hydrate。使用时是否有办法检测损坏的图像hydrate？
推荐指数
解决办法
查看次数
同行react-dom@15.6.2想要react@^15.6.2
我正在尝试从React 0.14.9升级到React 15.6.2，但是遇到了一个依赖问题。
npm ERR！peerinvalid软件包react@15.6.2不满足其兄弟姐妹的peerDependencies要求！
npm ERR！peerinvalid对等体react-dom@15.6.2想要react@^15.6.2
我不理解此错误，因为它似乎表明我需要对react-dom 15.6.2进行反应15.6.2，但已安装了React 15.6.2。
在我的package.json中，我尝试了各种组合，使用和不使用^，但是仍然存在相同的错误：
"react": "15.6.2",
"react-dom": "15.6.2",
推荐指数
解决办法
查看次数
拆除测试时使用unmountComponentAtNode或document.body.removeChild吗？
从此文档中：https : //reactjs.org/docs/hooks-faq.html#how-to-test-components-that-use-hooks
文档提供了一种设置和拆卸测试的方法，如下所示：
let container;
beforeEach(() => {
container = document.createElement('div');
document.body.appendChild(container);
});
afterEach(() => {
document.body.removeChild(container);
container = null;
});
从此文档中：https : //reactjs.org/docs/testing-recipes.html#setup--teardown
设置和拆卸方式如下：
import { unmountComponentAtNode } from "react-dom";
let container = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
// cleanup on exiting
unmountComponentAtNode(container);
container.remove();
container = null;
});
我有点困惑，哪一种是拆除测试的最佳方法？
unmountComponentAtNode+ dom.remove()或document.body.removeChild？
更新资料
拆解测试时，这两个官方文档提供了这两种方式，这是否意味着它们都可以？它们相等吗？或者是什么？
推荐指数
解决办法
查看次数
标签 统计
react-dom ×10
reactjs ×10
javascript ×5
node.js ×2
babeljs ×1
dependencies ×1
ecmascript-6 ×1
express ×1
image ×1
material-ui ×1
npm ×1
package.json ×1
react-16 ×1
react-router ×1
webpack ×1