程序设计 reactjs

5

反应Material-ui，我怎么知道我可以使用onClick for button？

该文档上的属性列表不包含onClick （http://www.material-ui.com/#/components/icon-button）我怎么知道我需要使用onClick作为点击处理程序？

76 reactjs material-ui

6

是否可以在React组件的状态下存储对象？如果是，那么我们如何使用来更改该对象中键的值setState？我认为在语法上不允许这样写： this.setState({ abc.xyz: 'new value' }); 同样，我还有一个问题：在React组件中可以有一组变量，以便可以在组件的任何方法中使用它们，而不是将它们存储在状态中，这可以吗？您可以创建一个包含所有这些变量的简单对象，并将其放置在组件级别，就像在组件上声明任何方法一样。很可能会遇到这样的情况，即您在代码中包含了很多业务逻辑，并且需要使用许多变量，这些变量的值可以通过几种方法更改，然后您可以根据这些值更改组件的状态。因此，您不必保留所有这些变量处于状态，而只需保留其值应直接反映在UI中的那些变量。如果这种方法比我在这里写的第一个问题更好，那么我就不需要在状态中存储对象。

76 javascript reactjs

7

如何在React组件中导入图像（.svg，.png）

我正在尝试在我的react组件之一中导入图像文件。我有Web Pack的项目设置这是我的组件代码 import Diamond from '../../assets/linux_logo.jpg'; export class ItemCols extends Component { render(){ return ( <div> <section className="one-fourth" id="html"> <img src={Diamond} /> </section> </div> ) } } 这是我的项目结构。我已经通过以下方式设置了webpack.config.js文件 { test: /\.(jpg|png|svg)$/, loader: 'url-loader', options: { limit: 25000, }, }, { test: /\.(jpg|png|svg)$/, loader: 'file-loader', options: { name: '[path][name].[hash].[ext]', …

76 javascript reactjs webpack

7

我应该何时将Redux添加到React应用程序？

我目前正在学习React，并且试图弄清楚如何与Redux一起使用它来构建移动应用程序。我对两者如何关联/一起使用感到困惑。例如，我在React https://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript中完成了本教程，但是现在我想尝试在该应用中添加一些reduces / action，我不确定这些内容将与我已经完成的工作联系在一起。

76 javascript mobile reactjs redux reducers

6

使用mapDispatchToProps避免无阴影的错误

我有以下组件会no-shadow在上触发ESlint错误FilterButton props。 import { setFilter } from '../actions/filter'; function FilterButton({ setFilter }) { return ( <button onClick={setFilter}>Click</button> ); } export default connect(null, { setFilter })(FilterButton); 如何在保持简洁语法mapDispatchToProps和ESlint规则的同时避免警告？我知道我可以添加注释以禁止显示警告，但是对每个组件执行此操作似乎都是多余且乏味的。

76 javascript reactjs redux eslint react-redux

6

React中的CSS伪元素

我正在构建React组件。正如React背后的一位专家在本次精彩的演讲中所建议的那样，我已经在组件中添加了CSS内联。我一直在努力寻找一种方法来内联添加CSS伪类，就像在演示文稿中名为“ :: after”的幻灯片上一样。不幸的是，我不仅需要添加该content:"";属性，还需要添加该属性position:absolute; -webkit-filter: blur(10px) saturate(2);。幻灯片显示了如何通过添加内容{/* … */}，但是如何添加其他属性？

76 javascript css reactjs pseudo-element

13

使用create-react-app时使用自定义生成输出文件夹

Facebook提供了构建React应用的create-react-app 命令。运行时npm run build，我们会在/build文件夹中看到输出。 npm运行构建将要生产的应用程序生成到生成文件夹。它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。最小化构建，文件名包含哈希。您的应用已准备好进行部署！我们如何使用自定义文件夹而不是/build输出？谢谢。

76 reactjs create-react-app

8

如何获得反应元件的宽度

我正在尝试创建一个范围输入，该范围输入在滑块的正上方显示一个工具提示。我在线上浏览了一些普通的JS示例，看来我需要具有元素的宽度才能完成这一工作。所以我只是想知道如何获得元素的宽度？几乎等同于JQuery方法 $(element).width()

76 reactjs

5

反应路由器v4默认页面（未找到页面）

这是常见的目的，将不匹配的请求定向到未找到的页面。使用react-router v4进行此操作看起来像以前的版本，我希望此示例在下面工作。链接可以正常工作，但我希望请求的NotFound组件仅请求未知的url；但它总是在那里。 import { BrowserRouter as Router, Route, Link } from 'react-router-dom' class Layout extends Component { render() { return ( <Router> <div className="App"> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/user">User</Link></li> </ul> <Route exact path="/" component={Home}/> <Route path="/user" component={User}/> <Route path="*" component={Notfound}/> </div> </Router> ); } } 它既然path="*"代表了所有请求和notfound组件，总是存在在那里，但是我怎么能说为有效的URL路径隐藏这个组件呢？

76 reactjs react-router

8

在react.js中加载DOM时的回调

当它的DOM元素（包括所有子节点）实际加载到页面上并准备就绪时，我想在我的react.js组件上调用一个回调。具体来说，我有两个想要渲染相同大小的组件，选择具有自然尺寸的任何一个组件的最大值。看起来componentDidMount并不是我真正想要的，因为每个组件仅被调用一次，但是我希望在组件完成渲染后再次调用我的回调。我以为可以将onLoad事件添加到顶级DOM元素中，但是我想这仅适用于某些元素，例如<body>和<img>。

76 reactjs

15

React-组件全屏（高度100％）

我一直坚持显示一个名为“ home”的React组件，该组件占据屏幕高度的100％。无论我使用CSS还是React内联样式都行不通。在下面的示例中，html，body和#app设置为height：CSS中为100％。对于.home，我使用了内联样式（但是无论我使用CSS还是内联样式都是相同的）：问题似乎来自于<div data-reactroot data-reactid='1'>未设置高度：100％。如果我使用Chrome开发人员工具对其进行了黑客入侵，则可以正常工作：那么在React中显示全高组件的正确方法是什么？欢迎任何帮助:)

76 css reactjs html

7

我该如何在反应中设置Cookie？

最初，我使用以下ajax设置cookie。 function setCookieAjax(){ $.ajax({ url: `${Web_Servlet}/setCookie`, contentType: 'application/x-www-form-urlencoded;charset=utf-8', headers: { 'Access-Control-Allow-Origin': '*', 'username': getCookie("username"), 'session': getCookie("session") }, type: 'GET', success: function(response){ setCookie("username", response.name, 30); setCookie("session", response.session, 30);} }) } function setCookie(cname, cvalue, minutes) { var d = new Date(); d.setTime(d.getTime() + (minutes*60*1000)); var expires = "expires="+ d.toUTCString(); document.cookie = cname …

76 reactjs cookies

8

React-Native视图自动宽度由内部文本

据我所知，react-native样式表不支持min-width / max-width属性。我里面有视图和文字。自动宽度视图不会通过继承文本元素来调整大小。如何解决该问题并使用文本宽度自动设置视图宽度？我的代码是： <View style={{backgroundColor: '#000000'}}> <Text style={{color: '#ffffff'}}>Sample text here</Text> </View> 在常见的HTML / CSS中，我会意识到： <div style="background-color: #000; display: inline;">Sample text here</div> 注意：flex：父视图上的1对我没有帮助。文字显示为 "Sam" "ple" "Tex" "t"

76 javascript reactjs react-native

2

Redux传奇中的getState？

我有一家商店，上面有物品清单。当我的应用程序首次加载时，我需要对项目进行反序列化，就像在基于项目创建一些内存中对象一样。这些项目存储在我的redux存储中，并由处理itemsReducer。我正在尝试使用redux-saga处理反序列化，这是副作用。在首页加载时，我调度了一个操作： dispatch( deserializeItems() ); 我的传奇故事设置简单： function* deserialize( action ) { // How to getState here?? yield put({ type: 'DESERISLIZE_COMPLETE' }); } function* mySaga() { yield* takeEvery( 'DESERIALIZE', deserialize ); } 在我的反序列化传奇中，我要处理创建商品的内存版本的副作用，我需要从商店中读取现有数据。我不确定在这里怎么做，或者这是否是我甚至应该尝试使用redux-saga的模式。

75 javascript reactjs redux redux-saga

2

React-js忽略标签的'for'属性

我知道对于“类”，我们必须使用className，但是我如何对保留“ for”属性做出反应？以下： <label for="recipient-name" className="control-label">Recipient:</label> 呈现为： <label class="control-label">Recipient:</label> 在不相关的注释上，我发现使用React时无法使用chrome的控制台更改属性很烦人。有办法解决吗？例如，如果我检查渲染的元素并手动添加'for'属性，则当我单击该控件时，该属性就会消失（大概是因为react重新渲染了我猜测的控件）

75 javascript reactjs

Questions tagged «reactjs»