react-jsx

ReactJS: “this.props” is not a function when child component calls parent

由 给你一囗甜甜゛ 提交于 2019-12-04 09:08:49
问题 I have written this code and am currently wrangling with a bug in an onClick event. I have two events, the onClick event on the child element and the onChange event on the top-level parent element. The expected behaviour should be to change the activeAccount variable currently held in the Container component. To do this, I added an onClick handler on the AccountRow component that should then call the top-level parent's onChange function. However, the line 'this.props.onChange(this.props

What is the purpose of having functions like componentWillMount in React.js?

由 前提是你 提交于 2019-12-04 08:30:15
问题 I have been writing components in React.js recently. I have never had to use methods like componentWillMount and componentDidMount . render is indispensable. getInitialState and other helper methods I wrote also come in handy. But not the two aforementioned lifecycle methods. My current guess is that they are used for debugging? I can console.log out inside them: componentWillMount: function() { console.log('component currently mounting'); }, componentDidMount: function() { console.log(

How do I utilize dot notation when rendering components?

由 一笑奈何 提交于 2019-12-04 07:48:09
I have a simple component which is supposed to render different kind of fields into my form component: import React from "react"; export default class Field extends React.Component { render() { switch (this.props.type) { case 'textarea': { return ( <div className="col-xs-12"> <textarea placeholder={this.props.placeholder} name={this.props.name} > </textarea> </div> ) } case 'text': { return ( <div className="col-md-6 col-lg-4"> <input type="text" placeholder={this.props.placeholder} name={this.props.name} /> </div> ) } } } } And I'm using this component in my form component like this: export

Testing a React Modal component

由 こ雲淡風輕ζ 提交于 2019-12-04 07:46:30
I'm sorry, but I've been having the toughest time trying to test closing my React Modal by clicking a button. The Modal is as simple as can be, and I've tried everything I can think of or find, but I still can't query its children. The Modal component: var React = require('react'); var Modal = require('react-bootstrap').Modal; var Button = require('react-bootstrap').Button; var MyModal = React.createClass({ ... render: function() { return ( <Modal className="my-modal-class" show={this.props.show}> <Modal.Header> <Modal.Title>My Modal</Modal.Title> </Modal.Header> <Modal.Body> Hello, World! <

cannot get the parent property this property when I have two inner loop

由 只谈情不闲聊 提交于 2019-12-04 06:43:47
问题 I have a complicated scenario which I am really confused how to deal with it. I have an array as follows: stories=[ { "categ": "politics", "arr": [{ "t": 1 }, { "t": 2 }, { "t": 3 }] }, { "categ": "Business", "arr": [{ "t": 1 }, { "t": 2 }, { "t": 3 }] } ] As you can see this array has another array inside it and depending on what is executed I need to loop through the first array and find the appropriate array inside the first array. So for instance if I want to get the array related to

React router only works with root path

由 旧时模样 提交于 2019-12-04 06:15:59
问题 Only root route works. /about, /home shows "Cannot GET /home" in browser. If i replace each route path with "/" then the corresponding component is rendering. But there seems to be problem when i try to render certain route eg /home. 回答1: You have to configure your server to work with Router.HistoryLocation -- that is, it needs to always serve your index.html page regardless of the route. app.get('*', function (req, res) { res.render('index'); }); Check out the docs here: React Router Docs -

How can I apply a style to a Bootstrap React element?

由 独自空忆成欢 提交于 2019-12-04 06:14:51
问题 The following is a line rendered inside a ReactJS Component for my application and saved as nav.jsx . <span style="font-family: 'Open Sans', sans-serif;"> Home</span> Exception: Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. This DOM node was rendered by `Nav`. at invariant (react.js:18354) at assertValidProps (react.js:6435) at ReactDOMComponent.mountComponent (react.js:6678)

How to use generics with arrow functions in Typescript/JSX with React?

由 烈酒焚心 提交于 2019-12-04 05:48:48
Using Typescript, typing in Visual Studio, into a ".ts" file, consider the following declaration: export const foo = <T>(myObject: T) => myObject.toString(); This works fine, type checking is fine, everything is great. Now place that exact same code into a ".tsx" file that is being used for JSX and React. Intellisense gets very upset and complains, because it is trying to make the <T> into a React JSX element. But my intention is to have the compiler treat it as a generic type designator. The compiler complains with: [gulp-typescript] 17008 JSX element 'T' has no corresponding closing tag. I

Code coverage on JSX tests with Istanbul

由 好久不见. 提交于 2019-12-04 05:42:21
I am trying to instrument my code to get some coverage up and running, but something is slipping through my fingers. I launch istanbul with: node_modules/.bin/istanbul cover ./node_modules/mocha/bin/_mocha -- -u exports -R spec And my mocha.opts looks like this: app/assets/javascripts/components/**/*-mocha.jsx --compilers jsx:mocha/compiler.js Everything seems to run fine (the tests run, at least), but the only coverage that I get is on the files used to compile the JSX to JavaScript (used in compiler.js compiler.js 100% jsx-stub-transform.js 65% Terribly useful... Any ideas? Jeff Fairley I

JSX doesn't evaluate integer in expression as boolean

由 依然范特西╮ 提交于 2019-12-04 04:13:43
问题 I'm used to write render optional Components like this: var Foo = React.createClass({ render: function() { var length = 0; return <div>Foo {length && <Bar />}</div>; } }); This shorthand if is mentioned in the if/else in JSX guide as immediately-invoked function expression. However, since my latest update of React, it started to render 0 instead of null . Here is a jsfiddle Why is that happening? 回答1: The && operator evaluates the left-hand expression first, and if the left-hand expression
订阅 react-jsx