Questions tagged «reactjs»

React渲染元素后如何获取元素的高度？ 的HTML <div id="container"> <!-- This element's contents will be replaced with your component. --> <p> jnknwqkjnkj<br> jhiwhiw (this is 36px height) </p> </div> ReactJS var DivSize = React.createClass({ render: function() { let elHeight = document.getElementById('container').clientHeight return <div className="test">Size: <b>{elHeight}px</b> but it should be 18px after the render</div>; } }); …

121 javascript  reactjs 

从使用ReactJS的prop验证功能开始，正如文档所说，出于性能原因，该功能仅在“开发模式”下有效。 React似乎正在验证我注释的特定组件的属性，但我不记得显式打开“开发模式”。 我尝试搜索如何触发/切换开发模式，但是没有任何运气。

120 reactjs 

我刚刚开始研究ReactJS，发现它为您提供了两种渲染页面的方法：服务器端和客户端。但是，我不知道如何一起使用。是使用两种单独的方法来构建应用程序，还是可以将它们一起使用？ 如果可以一起使用，该如何做-我们是否需要在服务器端和客户端重复相同的元素？或者，我们可以只在服务器上构建应用程序的静态部分，而在客户端上构建动态部分，而无需与已经预先渲染的服务器端建立任何连接？

120 javascript  node.js  client-server  reactjs 

我有 var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> ); } }); React.renderComponent(<TestApp />, document.body); 我想为单击列表元素的背景上色。我该如何在React中做到这一点？ 就像是 $('li').on('click', function(){ $(this).css({'background-color': '#ccc'}); });

120 javascript  jquery  reactjs 

当我尝试启动我的React Native应用程序时，我收到此消息。通常，这种格式可在其他多屏幕导航上使用，但在这种情况下不起作用。 这是错误： Invariant Violation: The navigation prop is missing for this navigator. In react-navigation 3 you must set up your app container directly. More info: https://reactnavigation.org/docs/en/app-containers.html 这是我的应用格式： import React, {Component} from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { createStackNavigator } from 'react-navigation'; import Login from …

120 reactjs  react-native 

如何监听contentEditable基于控件的更改事件？ var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire :( console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/

120 javascript  dom  contenteditable  reactjs 

我偶然发现钩子文档useRef。 看他们的例子... function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } …似乎useRef可以替换为createRef。 function TextInputWithFocusButton() { const inputRef = createRef(); // what's …

120 javascript  reactjs  react-hooks 

我正在构建一个应用程序，它将需要提供多种语言和区域设置。 我的问题不是纯粹的技术问题，而是关于架构以及人们在生产中实际用来解决此问题的模式。我在那里找不到任何“食谱”，所以我转向了我最喜欢的问答网站：) 这是我的要求（它们实际上是“标准”）： 用户可以选择语言（平凡） 更改语言后，界面应自动翻译成新选择的语言 我现在不太担心格式化数字，日期等的问题，我想要一个简单的解决方案来只翻译字符串 这是我可以考虑的可能解决方案： 每个组件都独立处理翻译 这意味着每个组件在其旁边都有例如一组en.json，fr.json等文件以及转换后的字符串。还有一个帮助程序功能，可帮助您根据所选语言从这些值中读取值。 Pro：更尊重React理念，每个组件都是“独立的” 缺点：您无法将所有翻译集中在一个文件中（例如，让其他人添加新语言） 缺点：您仍然需要在每个血腥部分及其子女中传递当前语言作为道具 每个组成部分都通过道具接收翻译 所以他们不知道当前的语言，他们只是拿一个字符串列表作为道具，恰好匹配当前的语言 优点：由于这些字符串是“自上而下”的，因此可以将它们集中在某个位置 缺点：现在每个组件都已绑定到翻译系统中，您不能只是重复使用一个组件，而是每次都需要指定正确的字符串 您绕过道具了一下，可能是使用情境啄向下传递当前语言 优点：几乎是透明的，不必始终通过道具传递当前语言和/或翻译 缺点：使用起来很麻烦 如果您还有其他想法，请说！ 你怎么做呢？

119 architecture  internationalization  reactjs  translation  redux 

说我有一个带有这样的渲染的组件： <View style={jewelStyle}></View> 其中jewelStyle = { borderRadius: 10, backgroundColor: '#FFEFCC', width: 20, height: 20, }, 如何使背景颜色动态并随机分配？我试过了 { borderRadius: 10, backgroundColor: getRandomColor(), width: 20, height: 20, }, 但这使View的所有实例具有相同的颜色，我希望每个实例都是唯一的。 有小费吗？

119 css  reactjs  react-native 

的意义是什么 {...this.props} 我正在尝试那样使用它 <div {...this.props}> Content Here </div>

119 reactjs 

我正在与Material-UI一起玩。是否有创建网格布局的任何选项（例如在Bootstrap中）？ 如果不是，添加此功能的方式是什么？ 有一个GridList组件，但我想它有一些不同的用途。

118 reactjs  material-design  material-ui  grid-system 

我希望能够通过HTML标签传递文本，如下所示： <MyComponent text="This is <strong>not</strong> working." /> 但是在MyComponent的render方法中，当我打印出时this.props.text，它实际上打印出了所有内容： This is <strong>not</strong> working. 有什么方法可以使React解析HTML并将其正确转储吗？

118 reactjs 

我仍然是React的菜鸟，在互联网上的许多示例中，我看到了渲染子元素时出现的这种变化，我感到困惑。通常我看到以下内容： class Users extends React.Component { render() { return ( <div> <h2>Users</h2> {this.props.children} </div> ) } } 但是然后我看到一个这样的例子： <ReactCSSTransitionGroup component="div" transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={500} > {React.cloneElement(this.props.children, { key: this.props.location.pathname })} </ReactCSSTransitionGroup> 现在，我了解了api，但是文档并未确切说明我何时应该使用它。 那么，一个人做什么却另一个人不能做什么呢？有人可以用更好的例子向我解释吗？

118 reactjs 

我刚刚开始使用TypeScript进行React项目，并问自己应该如何处理常规类文件？我应该使用.ts还是.tsx文件，然后我找不到所有不使用.tsx文件的理由，即使它不是一个React项目！ 有什么原因或特定情况我们不应该使用.tsx文件吗？如果没有，为什么TypeScript团队添加整个新扩展名？

118 javascript  reactjs  typescript 

作为React世界的初学者，我想深入了解我使用时会发生{this.props.children}什么以及使用该情况的情况。以下代码段的意义是什么？ render() { if (this.props.appLoaded) { return ( <div> <Header appName={this.props.appName} currentUser={this.props.currentUser} /> {this.props.children} </div> ); } }

118 javascript  reactjs  react-redux  frontend