react-jsx

问题 How do I make this work? <input type="checkbox" id={"delivery-" + this.props.ID} {this.props.disableIt ? 'disabled' : ''} /> I was expecting this code - {this.props.disableIt ? 'disabled' : ''} - to output a 'disabled' attribute, but it throws 'Unexpected token (102:89)'. But if I directly just put a static 'disabled' word in there, it works. 回答1: When using react, disabled it's a prop that you need to set true or false . When you just define the prop without a value, and this prop it's

问题 I have a react app in which I'd like to choose the type of component at runtime. I'm using ES6 and JSX. Here's my code: import Canvas from '../components/Canvas' import CanvasTextbox from '../components/CanvasTextbox'; .... export default class CenterPane extends React.Component { ... render() { const canvasKids = []; //for (var i = 0; i < 1; i++) { // canvasKids.push(<CanvasTextbox key={i} id={'CanvasTextbox1'} />); //}; for (var i = 0; i < 1; i++) { let kid = this.state.kids[i]; let

问题 I have a situation where I have two elements that are tied together, with a Board that non-negotiably always consists of 4 subdivision panels: var BoardPanel = React.createClass({ getInitialState: function() { return { someval: '' }; }, render: function() { <div>{this.state.someval}</div> }, doSomething: function(v) { setState({ someval: v }); } }); var BoardLayout = React.createClass({ render: function() { <div> <h1>{this.props.label{</h1> <div ref="panels"> <BoardPanel /> <BoardPanel />

问题 How would I set the tabIndex attribute on a React component conditionally in the same way, say the 'disabled' attribute is set? I need to be able to set the value and/or remove the attribute all together. First try was to make the entire attribute key and value a variable: <div { tabIndex } ></div> but the compiler complains. Second thought was to: const div; if( condition ){ div = <div tabIndex="1"></div> }else{ div = <div></div> } However, this is not desirable since my actual components

问题 I'm building a game using Express and React. I need to access the userId in my index.jsx file to perform actions on my controllers, like increment the user score. My route renders an index.pug file while passing a user_id param: //server.js app.get('/', function (req, res) { const userId = req.query.userId res.render('index', {userId: userId}) }) Then I can access the userId in my pug file, like this: // index.pug body div#errors #root p #{userId} // prints the User Id Now I need to access

问题 I'd like to unmount a single react component, which belongs to a parent component containing three components total. The parent component has this render function: render: function () { return ( <div className={classes}> <Navbar ref="navbar"/> <Home ref="home"/> <Footer ref="footer"/> </div> ), handleNavbarClick: function () { // remove Home } if a user then clicks on a link in the navbar and I want to unmount the Home component, how would I do that? it seems like my only option is to do

问题 I used the following packages individually and combined $ meteor add react $ meteor add firfi:meteor-react-bootstrap When I used the react package, bootstrap is not working. If I use firfi:meteor-react-bootstrap , the react package is not working. When I used both packages there is an error Uncaught Error : Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was

问题 How can I get a proper syntax highlighting in Visual Studio 2015 for JSX with ES2015 code? It works fine if I remove the import and export keywords: I just updated to Visual Studio 2015 Enterprise Update 1 but it still remains the same. 回答1: UPDATE (2017-02) Node Tools for Visual Studio (NTVS) has been using the Salsa analysis engine since v1.2 and using NTVS is likely the path of least resistance for JSX support. https://github.com/Microsoft/nodejstools Read (and upvote) this answer for more

问题 I'm running into persistent problems in my React renders. This code /** @jsx React.DOM */ var AnswerRows = React.createClass({ componentDidMount: function() { }, render: function() { {this.props.answers.map(function(answer, i) { return ( <div id="answerRow"> <label className="AnswerText"> <input type="checkbox" value={answer.id} /> {answer.text} </label> </div> ); }, this)} } }); var QuizTaking = React.createClass({ componentDidMount: function() { }, render: function() { return ( <div

问题 I have a rather simple problem and I'm not sure how to solve it with React's one way data flow. Say you have a link in the parent that shows a modal In the modal, you have an "X" that closes it. I know I can change the state of the modal from the parent via props // In the parent <Modal display={this.state.showModal} /> // In the modal <div className={this.props.display ? "show" : "hide"}> <a className="close">×</a> ... </div> And I know how to close the modal, but not both. Not sure how to