程序设计 reactjs

6

我刚刚开始通过添加带有简单渲染功能的组件来探索React： render() { return <div class="myApp"></div> } 运行应用程序时，出现以下错误： Warning: Unknown DOM property class. Did you mean className? 我可以通过更改class为解决此问题className。问题是; React是否执行此约定？另外，为什么我需要使用它className而不是传统方法class？如果这是一个限制，那是由于JSX语法还是其他原因？

113 javascript reactjs react-jsx

10

如何避免在React中额外包装<div>？

今天，我开始学习ReactJS，一个小时后面对了这个问题。我想在页面上的div内插入一个具有两行的组件。下面是我正在做的简化示例。我有一个html： <html> .. <div id="component-placeholder"></div> .. </html> 渲染功能如下： ... render: function() { return( <div className="DeadSimpleComponent"> <div className="DeadSimpleComponent__time">10:23:12</div > <div className="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> ) } .... 下面我称渲染： ReactDOM.render(<DeadSimpleComponent/>, document.getElementById('component-placeholder')); 生成的HTML如下所示： <html> .. <div id="component-placeholder"> <div class="DeadSimpleComponent"> <div class="DeadSimpleComponent__time">10:23:12</div> <div class="DeadSimpleComponent__date">MONDAY, 2 MARCH 2015</div> </div> </div> .. </html> 我不是很高兴React强迫我将它们全部包装在div“ …

113 javascript reactjs

7

React Router中同一组件的多个路径名

我将相同的组件用于三种不同的路线： <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> 无论如何有结合起来的样子，就像： <Router> <Route path=["/home", "/users", "/widgets"] component={Home} /> </Router>

113 javascript reactjs path react-router url-routing

13

React-Router外部链接

由于我正在使用react-router来处理我的React应用程序中的路由，因此我很好奇是否可以重定向到外部资源。假设有人点击： example.com/privacy-policy 我希望它重定向到： example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies 我发现避免在index.html加载类似以下内容的纯JS中编写零帮助： if ( window.location.path === "privacy-policy" ){ window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }

113 javascript reactjs redirect react-router react-router-redux

9

从react-router哈希片段获取查询参数

我在客户端上为我的应用程序使用react和react-router。我似乎无法弄清楚如何从如下网址获取以下查询参数： http://xmen.database/search#/?status=APPROVED&page=1&limit=20 我的路线如下所示（我知道该路线完全错误）： var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); 我的路线工作正常，但我不确定如何格式化路径以获取所需的参数。感谢任何帮助！

112 javascript reactjs client-side react-router client-side-scripting

10

在React JS中触发onchange事件的最佳方法是什么

我们使用Backbone + ReactJS捆绑包来构建客户端应用程序。严重依赖臭名昭著的是，valueLink我们通过自己的支持ReactJS接口进行双向绑定的包装器将值直接传播到模型。现在我们面对这个问题：我们有一个jquery.mask.js插件，可以以编程方式格式化输入值，因此不会触发React事件。当模型从用户输入中接收未格式化的值而从插件中丢失格式化的值时，所有这些都会导致情况。似乎React依赖于浏览器有很多事件处理策略。有什么通用的方法可以触发特定DOM元素的更改事件，以便React可以听到吗？

112 reactjs

7

无法添加任务“包装器”，因为该名称的任务已经存在

当安装'react-native init AwesomeProject'时，我在运行时收到此错误react-native run-android： Could not determine java version from '11.0.1'. 一个快速的谷歌建议我需要distributionUrl在Gradle-wrapper中更新。完成此操作后，我面临一个新错误： Cannot add task 'wrapper' as a task with that name already exists. 这表明问题出在文件中： /AwesomeProject/android/build.gradle' line: 36 看起来像这样 task wrapper(type: Wrapper) { gradleVersion = '4.4' distributionUrl = distributionUrl.replace("bin", "all") } 我一直来回地试图弄清楚这是怎么做的。某些东西开箱即用似乎很奇怪。是否有人面临类似的问题？

112 android reactjs react-native wrapper expo

5

如何在基于类的组件中使用React.forwardRef？

我正在尝试使用React.forwardRef，但是在如何使它在基于类的组件（而不是HOC）中工作的过程中遇到了麻烦。该文档示例使用元素和功能组件，甚至将类包装在功能较高的组件中。因此，从像这样在他们的ref.js文件： const TextInput = React.forwardRef( (props, ref) => (<input type="text" placeholder="Hello World" ref={ref} />) ); 而是将其定义如下： class TextInput extends React.Component { render() { let { props, ref } = React.forwardRef((props, ref) => ({ props, ref })); return <input type="text" placeholder="Hello World" ref={ref} />; } } 要么 class TextInput …

112 javascript reactjs

21

在每次转换时，将react-router滚动到顶部

导航到另一个页面时出现问题，其位置将保持与以前的页面相同。所以它不会自动滚动到顶部。我也尝试window.scrollTo(0, 0)在onChange路由器上使用。我还使用了scrollBehavior来解决此问题，但没有成功。有什么建议吗？

112 javascript reactjs react-router react-router-redux

10

<div>不能显示为<p>的后代

我看到了它抱怨的不是什么神秘的事情： Warning: validateDOMnesting(...): <div> cannot appear as a descendant of <p>. See ... SomeComponent > p > ... > SomeOtherComponent > ReactTooltip > div. 我的作者SomeComponent和SomeOtherComponent。但是后者正在使用外部依赖项（ReactTooltipfrom react-tooltip）。这可能不是一个外部依赖关系，但这不是必须的，但是它让我在这里尝试使用“某些代码超出了我的控制”这一论点。考虑到嵌套组件工作正常（貌似），我应该为这个警告感到多担心？而且无论如何我将如何进行更改（前提是我不想重新实现外部依赖项）？是否有我尚未意识到的更好的设计？为了完整起见，这里是的实现SomeOtherComponent。它只是呈现this.props.value，并且在悬停时：提示“某些提示信息”的提示： class SomeOtherComponent extends React.Component { constructor(props) { super(props) } render() { const {value, ...rest} = this.props; return <span className="some-other-component"> <a href="#" …

112 reactjs

6

无法在React输入文本字段中输入

我正在尝试使用React.js的第一部分，并且很早就陷入了困境...我有下面的代码，该代码将搜索表单呈现为<div id="search"></div>。但是，在搜索框中输入内容无济于事。大概在通过道具并上下移动时会丢失一些东西，这似乎是一个常见问题。但是我很沮丧-我看不到缺少的东西。 var SearchFacet = React.createClass({ handleChange: function() { this.props.onUserInput( this.refs.searchStringInput.value ) }, render: function() { return ( <div> Search for: <input type="text" value={this.props.searchString} ref="searchStringInput" onchange={this.handleChange} /> </div> ); } }); var SearchTool = React.createClass({ render: function() { return ( <form> <SearchFacet searchString={this.props.searchString} onUserInput={this.props.onUserInput} /> <button>Search</button> </form> ); } …

111 javascript reactjs

1

使用redux时应该使用this.setState（）吗？

this.setState()使用redux时应该使用吗？还是应该一直在派遣行动并依靠道具？

111 reactjs flux redux

7

React的JSX语法中的双花括号的目的是什么？

从react.js教程中，我们可以看到双花括号的用法： <span dangerouslySetInnerHTML={{ __html: rawMarkup }} /> 然后在第二个教程“ Thinking in react”中： <span style={{ color: 'red' }}> {this.props.product.name} </span>; 但是，React JSX文档没有描述或提及双花括号。此语法（双curies）的作用是什么？还有另一种方法可以在jsx中表达相同的东西，或者这仅仅是文档中的遗漏？

111 javascript reactjs

9

ReactJS：“未捕获的SyntaxError：意外令牌<”

我正在尝试开始在ReactJS中构建网站。但是，当我尝试将JS放在单独的文件中时，我开始收到此错误：“ Uncaught SyntaxError：Unexpected token <”。我尝试添加/** @jsx React.DOM */到JS文件的顶部，但没有解决任何问题。以下是HTML和JS文件。关于出什么问题有什么想法吗？的HTML <html> <head> <title>Page</title> <script src="http://fb.me/react-0.12.2.js"></script> <script src="http://fb.me/JSXTransformer-0.12.2.js"></script> <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script> <script src="./lander.js"> </script> </head> <body> <div id="content"></div> <script type="text/jsx"> React.render( <Lander />, document.getElementById('content') ); </script> </body> </html> JS /** * @jsx React.DOM */ var Lander = React.createClass({ render: function () …

110 javascript html reactjs react-jsx

16

打字稿反应-找不到模块“ react-materialize”的声明文件。'path / to / module-name.js'隐式具有任何类型

我正在尝试从react-materialize中导入组件- import {Navbar, NavItem} from 'react-materialize'; 但是当webpack正在编译我的文件时，.tsx它会为上述内容引发错误- ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. 这个的任何解决方案。我不确定如何解析此导入语句以与ts-loaderwebpack一起使用。该index.js反应-Materialise的长相很喜欢这一点。但是如何解决此问题的模块导入到我自己的文件中.. https://github.com/react-materialize/react-materialize/blob/master/src/index.js

110 reactjs webpack webpack-2

Questions tagged «reactjs»