问题
I'm very new to React. I'm practicing by creating a very simple nine grid box, where a user can select what color they want to use at the moment by using a dropdown menu. The only thing is, I can't quite figure out how to pass the variable from the class that contains it (ColorPicker) to the the class that contains the grids (Box). Can anyone give me some pointers on how to do this?
I'm still getting used to passing props to other classes.
Here's a link to the CodePen: http://codepen.io/anfperez/pen/RorKge
Here's my code
//this displays the color selections for the boxes: red, green, and blue
var ColorPicker = React.createClass({
handleChange: function(e) {
var newColor = e.target.value;
this.props.onChange(color);
},
render: function() {
return (
<div>
<select id="pick-colors" onChange={this.handleChange}>
<option value="red">
Red
</option>
<option value="green">
Green
</option>
<option value="blue">
Blue
</option>
</select>
</div>
)
}
});
//contains the boxes that will eventually change color
var Box = React.createClass({
getInitialState: function() {
return {
//boxes are initially white
color: 'white'
};
},
changeColor: function(newColor) {
var newColor = this.state.color;
this.setState({
color: newColor
});
},
render: function() {
return (
<div >
<div className='box' style={{background:this.state.color}} onClick={this.changeColor}>
</div>
</div>
);
}
});
回答1:
Props in React get passed from the parent to the child. For instance, If you have a parent class which renders a child class, the parent class can now pass props to the child class. Here is an example.
class Parent extends React.Component {
render() {
return (
<Child example="foo" />
)
}
}
class Child extends React.component {
render() {
return (
<h1>{this.props.example}</h1>
)
}
}
The parent class renders the child class. The parent class passes a prop to child called example. In child you can have access to the value of child by calling this.props.example
回答2:
Instead of rendering to the DOM 10 times, you should render one main component that wraps each of the others. You can reuse components inside other components and pass props down.
回答3:
You must use another component that contains these two and manages the selected color as its state. when the ColorPicker gets a new value, the container's state updates, and Box gets this it's color value from the containers state.
ColorPicker should get from props the callback to execute when the color value changes.
var ColorPicker = React.createClass({
render: function() {
return (
<div>
<select id="pick-colors" onChange={this.props.onChange}>
<option value="red">
Red
</option>
<option value="green">
Green
</option>
<option value="blue">
Blue
</option>
</select>
</div>
)
}
});
var App = React.createClass({
getInitialState: function() {
return {
selectedColor: '#FFFFFF'
}
},
onColorPicked: function(e) {
this.setState({selectedColor: e.target.value })
},
render: function() {
return (
<div>
<ColorPicker onChange={this.props.onColorPicked} />
<Box color={this.state.selectedColor} />
</div>
)
}
}
The only stateful component should be App. It passes its state through props to the other components.
回答4:
You could do something like this
var ColorPicker = React.createClass({
getInitialState: function() {
return {color: 'white'}
},
handleChange: function(e) {
var newColor = e.target.value;
this.setState({color: newColor})
},
render: function() {
return (
<div>
<select id="pick-colors" onChange={this.handleChange}>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<Box color={this.state.color} />
<Box color={this.state.color} />
<Box color={this.state.color} />
</div>
)
}
});
//contains the boxes that will eventually change color
var Box = React.createClass({
render: function() {
return (
<div >
<div className='box' style={{background:this.props.color}}>
</div>
</div>
);
}
});
ReactDOM.render(<ColorPicker />, document.getElementById('pick_color'));
Instead of rendering the box multiple times or use @gesuwall's suggestion above. I think his way is the more effective way.
回答5:
This is a case where you need to lift the state up into a parent component that wraps both the ColorPicker and the Box classes. The new parent component will then be responsible for managing the current color state, and dealing with any changes to it. The reactJS docs on lifting state will be helpful to you.
回答6:
- You must call React.render once per application, because each call means that the new virtual DOM created for some new App
- You must understand virtual DOM conception and implement your markup in top level Application container component in his render method
- In a pure case, like this example, you must connect all data throught App component state, means ColorPicker component on change color store it in App state, from which it updates a Box component props by changed value, but if You develop more complex application, you must organize data storage using redux or flux conception, which also will be right way for exchange data between several applications on same page
So, here right code, which implement your sample
回答7:
When passing properties from a parent to the child, you need to use the componentDidUpdate() method to collect, and use the properties. Otherwise, the properties may not yet be initialized and results in null values in the child component. I modified the code from above to include the componentDidUpdate() method.
class Parent extends React.Component {
render() {
return (
<Child bandName="foo fighters" />
)
}
}
class Child extends React.Component {
//For props, you use componentDidUpdate
componentDidUpdate(prevProps){
//You must have an if check, or loop forever
if(this.props.bandName !== this.prevProps.bandName){}
//do something like make an API call
//perhaps set this on state for display
}
}
render() {
return (
<h1>{this.props.bandName}</h1>
)
}
}
来源：https://stackoverflow.com/questions/40662893/how-to-pass-props-from-one-class-to-another-in-react-js