Ich studiere über die folgende Komponente Beispiel ReactJS und kam:ReactJS: Was bedeuten der erste Parameter in addEventListener, ReactDOM.render() und() in der Rückgabeanweisung?
class MyComponent extends React.Component {
constructor(props) {
super(props);
// set the default internal state
this.state = {
clicks: 0
};
this.clickHandler = this.clickHandler.bind(this);
}
componentDidMount() {
this.refs.myComponentDiv.addEventListener(
‘click’,
this.clickHandler
);
}
componentWillUnmount() {
this.refs.myComponentDiv.removeEventListener(
‘click’,
this.clickHandler
);
}
clickHandler() {
this.setState({
clicks: this.clicks + 1
});
}
render() {
let children = this.props.children;
return (
<div className=”my-component” ref=”myComponentDiv”>
<h2>My Component ({this.state.clicks} clicks})</h2>
<h3>{this.props.headerText}</h3>
{children}
</div>
);
}
}
Was der erste Parameter, 'click', bedeuten in this.refs.myComponentDiv.removeEventListener() und this.refs.myComponentDiv.removeEventListener()? Und warum müssen Sie props zu super() übergeben? Und was bedeutet () in ({this.state.clicks} clicks})?
Schließlich stieß ich auf eine stateless Komponente:
const StatelessCmp = (props) => {
return (
<div className=”my-stateless-component”>
{props.name}: {props.birthday}
</div>
);
};
// ---
ReactDOM.render(
<StatelessCmp name=”Art” birthday=”10/01/1980” />,
document.getElementById(“main”)
);
Und wann wählen Sie eine stateless Komponente benutzen? Und wann verwenden Sie und was macht ReactDOM.render(), vor allem der document.getElementById(“main”) Teil? Denn normalerweise würden Sie einfach export default ... tun.
Und im Folgenden werden einfach die beiden <p>'s oben auf der <MyComponent/> Klasse angezeigt werden?
<MyComponent headerText=”A list of paragraph tags”>
<p>First child.</p>
<p>Any other <span>number</span> of children...</p>
</MyComponent>
Vielen Dank und wird sicher sein, zu upvote und Antwort zu akzeptieren!