xxxxxxxxxx
function Person({name, age, country}) {
return (
<div>
<h2>{name}</h2>
<h2>{age}</h2>
<h2>{country}</h2>
</div>
);
}
export default function App() {
const obj = {name: 'Alice', age: 29, country: 'Austria'};
return (
<div>
<Person {obj} />
</div>
);
}
xxxxxxxxxx
class MouseTracker extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0, y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
});
}
render() {
return (
<div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}>
<h1>Move the mouse around!</h1>
<p>The current mouse position is ({this.state.x}, {this.state.y})</p>
</div>
);
}
}
xxxxxxxxxx
const commonProps = {myProp1: 'prop1',myProp2: 'prop2'};
<MyJsx commonProps={commonProps} />