react-jsx | 易学教程

Best practice when adding whitespace in JSX

阅读更多关于 Best practice when adding whitespace in JSX

问题 I understand how (and why) to add a whitespace in JSX, but I am wondering what's best practice or if any makes any real difference? Wrap both elements in a span <div className="top-element-formatting"> <span>Hello </span> <span className="second-word-formatting">World!</span> </div> Add them on one line <div className="top-element-formatting"> Hello <span className="second-word-formatting">World!</span> </div> Add space with JS <div className="top-element-formatting"> Hello {" "} <span

How to properly make REST calls from ReactJS + Redux application?

阅读更多关于 How to properly make REST calls from ReactJS + Redux application?

问题 I'm using ReactJS + Redux, along with Express and Webpack. There is an API built, and I want to be able to make REST calls -- GET, POST, PUT, DELETE -- from the client-side. How and what is the properly way to go about doing so with the Redux architecture? Any good example of the flow, in terms of reducers, action creators, store, and react routes, would be extremely helpful. Thank you in advance! 回答1: The simpliest way, is to do it using redux-thunk package. This package is an redux

Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS

阅读更多关于 Uncaught TypeError: Cannot read property 'Checked' of undefined - ReactJS

问题 I am trying to create a simple a TODO list app in ReactJS. My basics of React are not very clear so I am stuck here. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>React TODO</title> <script src="../../build/react.js"></script> <script src="../../build/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel" lang="ja"> var TodoList = React.createClass({

Stop cursor jumping when formatting number in React

阅读更多关于 Stop cursor jumping when formatting number in React

问题 I have an input field on my react component that shows the line price for an item (two decimal places with thousands separators). I want the value shown to be in money format when the component first renders and also to be kept in money format as user types in the field. At the moment I have the following code in my component: var React = require('react'); import accounting from 'accounting'; MoneyInput = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, onChange:

Trying to use React.DOM to set body styles

阅读更多关于 Trying to use React.DOM to set body styles

问题 How can I use React.DOM to change styles on HTML body ? I tried this code and it's not working: var MyView = React.createClass({ render: function() { return ( <div> React.DOM.body.style.backgroundColor = "green"; Stuff goes here. </div> ); } }); If you execute this from the browsers console it works (but I need it working in ReactJS code): document.body.style.backgroundColor = "green"; Also see this question for similar but different solution: Change page background color with each route

Import React vs React, { Component }

阅读更多关于 Import React vs React, { Component }

问题 Import React vs Import React, { Component } Which one is better and why? Or does it make no difference other than writing less code later on? Does writing { Component } mean it only imports the Component object? 回答1: import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component . It's less typing and duplication of the React namespace, which is generally a desired modern coding convention. Additionally, tools like Webpack 2 and Rollup do

ReactJS: onClick handler not firing when placed on a child component

阅读更多关于 ReactJS: onClick handler not firing when placed on a child component

问题 I recently started working with ReactJS . Specifically, I am utilizing the react-rails ruby gem and react-bootstrap components. I have a question regarding placing onClick event listeners in child components. As you can see from the code sample below, I have a parent component that 'calls' a child component in its render function. Within that render function, I have React onClick listener that calls handleToggle when it is clicked. ###* @jsx React.DOM ### ToggleIconButton = React.createClass

Change language to JSX in Visual Studio Code

阅读更多关于 Change language to JSX in Visual Studio Code

问题 Visual Studio Code now supports JSX on 0.8 version, but looks like the only way to activate it is with a .jsx file extension. It is not on the list to change the language mode manually, the nearest option is JavaScriptReact , but it doesn't parse the JSX tags. I'm in a project with a lot of .js files with JSX and I can't change it. Is there any other way to use JSX syntax without the .jsx extension? 回答1: Change your user settings or workspace settings as below: // Place your settings in this

How to have conditional elements and keep DRY with Facebook React's JSX?

阅读更多关于 How to have conditional elements and keep DRY with Facebook React's JSX?

问题 How do I optionally include an element in JSX? Here is an example using a banner that should be in the component if it has been passed in. What I want to avoid is having to duplicate HTML tags in the if statement. render: function () { var banner; if (this.state.banner) { banner = <div id="banner">{this.state.banner}</div>; } else { banner = ????? } return ( <div id="page"> {banner} <div id="other-content"> blah blah blah... </div> </div> ); } 回答1: Just leave banner as being undefined and it

How to have conditional elements and keep DRY with Facebook React's JSX?

阅读更多关于 How to have conditional elements and keep DRY with Facebook React's JSX?