react-jsx

问题 I have this .tsx file import React, { Component } from 'react'; export class SidebarItem extends Component { constructor (props) { super(props); } render () { return (<li>{this.props.children}</li>); } } However, TypeScript throws this error: error TS2339: Property 'props' does not exist on type 'SidebarItem'. 回答1: The solution is to install the React Types defintions yarn add -DE @types/react More details from the typescript docs and from the types repo On a side note I had to restart vscode

问题 The problem I have is when using the "react-app" Babel presets, Babel prevents me from using browser native ES6 features. How do I use the ES6 browser native features available in the latest Chrome http://kangax.github.io/compat-table/es6/ While also using the ES6 module system , which currently has no support https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import And additionally keep using the JSX syntax while writing React Components? 回答1: The solution I found was

问题 very simple question, when I loop through array when rendering react compnent with .map function, say: render() { let board = this.props.board; return ( <div> { board.map((piece,index) => { return ( <Piece data={piece}/> ); }) } </div> ); } I'm trying to add a break line every 5 pieces so (index % 5 == 0) add <br /> before the <Piece /> when I try to concatinate with + or to do something like this: board.map((piece,index) => { return ( (index % 5 == 0) ? <br /> : '' <Piece data={piece}/> ); }

问题 What is the correct syntax to handle nested conditional logic in a React component? React.createClass render: -> <div> {if @props.showList {for item in @props.myItems {item} } else } </div> The for loop (on its own) can be rendred; the if/else conditional (on its own) can be rendered. However, nesting the for loop inside the conditional fails. Any help would be very much appreciated. 回答1: I haven't tested it, but based on how normal JSX works you only need the {expression} thing to escape

问题 I have a NodeJS server code written in JSX where I'm importing superagent like so: import request from 'superagent'; When server starts after build, I get the following error: TypeError: require is not a function. And this happens at the following line in my compiled code: var crypto = require('crypto'); On tracing back I realized that crypto is required by 'formidable', which is required by 'superagent'. I have the same superagent import in my client side javascript code but that works fine.

问题 I have a scenario where I'm using React.js to create a div using the following code : React.createElement('div', {}, "div content") Some additional javascript processing will allow me afterwards to deduce if this div needs to have the className attribute set to" ClassA" or "ClassB" or if it shouldn't have className at all. Is there a way in javascript to access the div that was created from the React DOM and to add to it the className attribute? Note : I couldn't achieve this is JSX so I

问题 This question already exists : javascript number/currency formatting [duplicate] Closed 4 years ago . I am writing a jsx file and want to format the display of numbers in a table. Here is the code for the table: <tr> <td> {stringVar} </td> <td> {numberVar} </td> </tr> The numberVar is being printed directly; how can I display that number with C-style string formatting (I need to set precision value, add commas, and a $ character)? 回答1: You can use any JS expression to format the value. A

问题 The Problem: In React, you want to create a DOM structure by mapping an array, but each item in the array should return 2 elements. e.g. import React from 'react' import _ from 'lodash' let { Component } = React export default class DataList extends Component { render () { let array = [ {def: 'item1', term: 'term1', obj1: 'rand'}, {def: 'item2', term: 'term2'} ] return ( <dl> {_.map(array, (item) => { return ( <dt>{item.def}</dt> <dd>{item.term}</dd> ) })} </dl> ) } } React doesn't let you

问题 Is there a way to insert an HTML comment node in React JSX, in the same way you might insert a component or DOM node? E.g., something like: React.createElement(Comment, {}, "comment text"); Would render to: <!-- comment text --> The idea is that the comment be visible on the page, so { /* this /* } doesn't answer my question. Note that the following related question doesn't have an answer and asks for something somewhat different: How to render a HTML comment in React? I just want to render a

问题 In my JSX, I have a case of a conditional rendering logic - when element A renders something (it's render() function returns something other than null ), then also render element B, just above the element A. Code example (simplified) would look like this: function render() { let elemA = (<ElementA someProp={this.someVar} />); if (elemA.isNull()) { return ( <div> { ...someElements } </div> ); } return ( <div> { ...someElements } <ElementB /> { elemA } </div> ); } So my question is - Is there