React的新手,这只是我上课的第一天.
我要做的就是,当我单击一个框时,记录颜色道具.
我知道我不能做console.log(this.props.color)
因为这是引用应用程序…
现在这真是令人困惑..任何提示将不胜感激.
class Boxes extends Component{
render(props){
return (
<div className="Boxes" onClick={this.props.getBoxColor}>
<div className="Box1" color="red"></div>
<div className="Box2" color="orange"></div>
<div className="Box3" color="yellow"></div>
<div className="Box4" color="green"></div>
<div className="Box5" color="blue"></div>
</div>
);
}
}
class App extends Component {
getBoxColor=()=>{
console.log(this.props)
}
render() {
return (
<Boxes classColor={this.color} getBoxColor={this.getBoxColor} />
)
}
}
ReactDOM.render(<App />,document.getElementById('root'));
最佳答案
试试这个,告诉我它是否适合您.
class Box extends React.Component {
render() {
const className = this.props.className;
const color = this.props.color;
return (
<div
className={className}
color={color}
onClick={() => console.log(color)}
/>
);
}
}
class App extends React.Component {
render() {
return (
<div>
<Box className="Box1" color="red" />
<Box className="Box2" color="blue" />
<Box className="Box3" color="green" />
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById("root"));
