react-jsx | 易学教程

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

阅读更多关于 How to use generics with arrow functions in Typescript/JSX with React?

问题 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

Difference between anonymous function vs named function as value for an object key

阅读更多关于 Difference between anonymous function vs named function as value for an object key

I have compiled JSX to JavaScript using Babel compiler. Here is the piece of code I'm intrigued with. getInitialState: function getInitialState() { //List out different states that ListComponent could possibly have return { showList: true, listType: this.props.type After compiling JSX to JS, getInitialState is a named method getInitialState(). I couldn't figure out why it isn't a anonymous method. Original code: getInitialState: function() { //List out different states that ListComponent could possibly have return { showList: true, listType: this.props.type Is there any performance advantage

React-router not displaying component

阅读更多关于 React-router not displaying component

问题 I'm currently learning react-router, and then trying to implement it in a sample app. Here is my code: index.html <!DOCTYPE html> <html> <head> <title>Sample APP</title> <link rel="stylesheet" href="dist/css/style.css"> </head> <body> <div id="main"></div> </body> <script src="dist/js/main.js"></script> </html> /src/app.jsx var React = require('react'); var ReactDOM = require('react-dom'); var Routes = require('./routes'); ReactDOM.render(Routes, document.getElementById('main')); /src/routes

How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?

阅读更多关于 How to Separate Jsx inside render function into a separate file in ES6? or any other solution in react to separate the Logic and presentation?

Here is the code in ES5 in which the jsx is written into a separate file import React from 'react'; import Template from './template.jsx'; const DetailElement = React.createClass({ render: Template }); export default DetailElement; enter code here template.jsx file will be like this import React from 'react'; const render = function() { return ( <div>Hello World</div> ); }; export default render; How can I write the same using ES6 Classes ? Or any other solution is available to do this separation ? I have got the ES6 code something like this import React, {Component} from 'react'; import

Why doesn't ReactJS autogenerate keys for dynamic children?

阅读更多关于 Why doesn't ReactJS autogenerate keys for dynamic children?

问题 When coding ReactJS I have to supply keys for dynamic children. For example: render() { const {options} = this.state const availableOptions = options.map(opt => { return ( <option key={opt.id} value={opt.id}>{opt.displayValue}</option>} ) } return ( <select onChange={this._onOptionSelect}> {availableOptions} </select> ) } I understand why they keys are there. But why do I have to give them? Couldn't react just assign a running number or UUIDv4 or something else? Related doc: http://facebook

How can i create input text fields dynamically in react js - JSX?

阅读更多关于 How can i create input text fields dynamically in react js - JSX?

I'm pretty new to reactjs, i came across a scenario where i've to create 6 input fields which are very much similar to each other. Right now i've something like this in my render method of class, render () { return ( <div> <p> <label htmlFor="answer1">Answer:</label><br/> <input type="text" name="answer1" id="answer1" className="answer" value={this.state.answer1} onChange={this._handleChange} /> </p> <p> <input type="text" name="answer2" id="answer2" className="answer" value={this.state.answer2} onChange={this._handleChange} /> </p> <p> <input type="text" name="answer3" id="answer3" className=

Pass this.refs as property in jsx in React.js

阅读更多关于 Pass this.refs as property in jsx in React.js

I'm trying to pass 1 node as a property of another React component like this: render: function() { return ( <div> <div ref='statusCircle'></div> <Popover trigger={ this.refs.statusCircle }></Popover> </div>); ); } But in the Popover, this.props.trigger is NULL. Is there anything wrong with my code? How can I pass a node-ref to another React component as property? After typing this I realized it's really not an answer to the original question but instead a follow-up to your request for suggestions in your comment above. If you really don't believe it should stay, I'll delete it but it's too big

indeterminate checkbox in React JSX

阅读更多关于 indeterminate checkbox in React JSX

问题 How do I render an indeterminate checkbox in JSX? Here's what I've tried: render() { return <input type="checkbox" checked={this.props.state === "checked"} indeterminate={this.props.state === "indeterminate"} /> } However, indeterminate is not an attribute on the HTMLElement , but a property . How do I set properties from React / JSX? 回答1: You can use the componentDidMount step (which is invoked after the initial rendering) to set that property: componentDidMount() { React.findDOMNode(this)

How to conditionally add closing and starting JSX tags

阅读更多关于 How to conditionally add closing and starting JSX tags

I have never been able to figure out how to conditionally close off an existing JSX tag and start a new one without getting syntax errors in Visual Studio. How is this done? In the example below, I want to split an existing table into two tables. I don't get any syntax errors if I remove the conditional code. <table> <thead> ... </thead> {true ? </table> /* Close first table (Syntax error on this line because of no starting tag) */ <table> /* Create a new table by splitting the existing table */ : null} <tbody> ... </tbody> </table> I solved this by creating a renderTable(rows) method that I

Dispatch a Redux action with the subsequent action as payload to show a snackbar or dialog of Material UI

阅读更多关于 Dispatch a Redux action with the subsequent action as payload to show a snackbar or dialog of Material UI

问题 I'm using React with Redux and Material UI to build a webapp. The webapp is made of several pages and components. I know that a snackbar or dialog should be directly connected to what the user is doing. However, I'd like to make the snackbar and dialog independent on the pages and components. A use case therefore is displaying a message like background synchronization of your data failed and an action retry now . My idea was to render the snackbar on a page called RootFrame , which is used to