react-jsx

问题 In my react js app, I can't seem to use the state value as props for the child component. In the parent component, constructor , the app has a null state called selectedWarehouseID . This state( selectedWarehouseID ) should update with some information in the componentWillMount() method. Now, in the render method of the parent component I am embedding another child component that has this state as a props. <ItemChooser productsByWarehouse = { this.state.selectedWarehouseID } /> Now here's the

问题 I have an array that contains React Component string names ("SampleWidget1"); it's populated by an external mechanism. Within my DashboardInterface component, I'd like to consume that array, render the Components contained within it, and display it amongst other statically defined HTML in the DashboardInterface.render function. How can I do this in React? Below is my attempt; there are no errors, but the rendered components are never actually successfully inserted into the DOM. If I manually

问题 I have created three basic components. A renders both the components B and C B is like header containg tabs 1,2,3 C is the first page on which there are two forms, one shows at a time. On showing first form i need to show tab one 1 in B component. On showing second form i need to show tab 3 in B component. I just want to pass the data from C component on the basis of which form is showing to B component. I put state on C component and tried to use same this.state.data or this.props.data for

问题 How can I use Jest to test React components written in CoffeeScript + React jsx? The only CoffeeScript example provided with Jest uses plain CoffeeScript, and doesn't work with CoffeeScript + React JSX (syntax error when it reaches a < ). What I have tried first attempt: execSync // preprocessor.js var execSync = require('exec-sync'); module.exports = { process: function (src, path) { return execSync('browserify -t coffee-reactify ' + path); } }; This works, but takes too much time (a good 12

问题 im starting ReactJS and i try to use Firebase as a database to collect my data. Im stuck from 2 days now cause of this error : "Cannot read property 'setState' of null" I can read my data from Firebase but i can't display them... I don't really know what to do : import React from 'react'; import ProductList from '../Product/ProductList'; import Firebase from 'firebase'; class HomePage extends React.Component { constructor() { super(); this.state = { productList: [] } var firebaseRef = new

问题 I'm extending a base class and overriding a method in the base class. But when I call it, it calls the super class version. How do I override the method? var Hello = React.createClass( { getName: function() { return "super" }, render: function() { return <div>This is: {this.getName()}</div>; } }); class HelloChild extends Hello { constructor(props) { super(props); console.log( this.getName()); } getName() { return "Child"; } }; I want it to print "This is: Child" but it prints "This is: super

问题 I currently have this simple react app and I cannot get these onchange events to fire for the life of me. var BlogForm = React.createClass({ getInitialState: function() { return { title: '', content: '' }; }, changeTitle: function(event) { var text = event.target.value; console.log(text); this.setState({ title: event.target.value }); }, changeContent: function(event) { this.setState({ content: event.target.value }); }, addBlog: function(ev) { console.log("hit hit"); }, render: function() {

问题 I'm getting an error from Babel when trying to compile my JSX code into JS. I'm new to react so apologies if this is an obvious issue, I wasn't able to find anything about it that seemed related. I'm attempting to use props in this chunk of code, and pass a pageTitle prop to my FieldContainer component. This is giving me an issue, though, that isn't letting the code compile to JS. I discovered in my searching that prop values should be passed between {} , but adding these did not help. Any

问题 I'm trying to iterate through all the keys in a hash, but no output is returned from the loop. console.log() outputs as expected. Any idea why the JSX isn't returned and outputted correct? var DynamicForm = React.createClass({ getInitialState: function() { var items = {}; items[1] = { name: '', populate_at: '', same_as: '', autocomplete_from: '', title: '' }; items[2] = { name: '', populate_at: '', same_as: '', autocomplete_from: '', title: '' }; return { items }; }, render: function() {

问题 I have an element with a ref that is defined and ends up getting rendered into the page : <div ref="russian" ...> ... </div> I want to access the DOM element properties like offset... or something. However, I keep getting undefined and I haven't the faintest idea why. After some searching it's clear that refs are only applicable to one file but I'm not using this anywhere besides this one page. I'm saying this to log it: console.log('REFS', this.refs.russian); What could be causing this? 回答1: