ReactJS：addEventListener、ReactDOM.render() 和 () 中的第一个参数在 return 语句中是什么意思？答案

【问题标题】：ReactJS: What do first parameter in addEventListener, ReactDOM.render(), and () mean in return statement?ReactJS：addEventListener、ReactDOM.render() 和 () 中的第一个参数在 return 语句中是什么意思？
【发布时间】：2017-04-26 00:26:25
【问题描述】：

我正在研究 ReactJS 并遇到了以下组件示例：

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>
        );
    }
}

this.refs.myComponentDiv.removeEventListener() 和this.refs.myComponentDiv.removeEventListener() 中的第一个参数'click' 是什么意思？为什么你必须将props 传递给super()？ () 在({this.state.clicks} clicks}) 中是什么意思？

最后，我遇到了一个无状态组件：

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”)
);

你什么时候选择使用无状态组件？你什么时候使用ReactDOM.render() 做什么，尤其是document.getElementById(“main”) 部分？因为通常情况下，您只需使用export default ...。

在下面，两个<p>'s 会简单地显示在<MyComponent/> 类的顶部吗？

<MyComponent headerText=”A list of paragraph tags”>
    <p>First child.</p>
    <p>Any other <span>number</span> of children...</p>
</MyComponent>

谢谢你，一定会支持并接受答案！

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-jsx

【解决方案1】：

'click' 是单击视口/元素时创建的单击事件的名称
在扩展类 React.Component 时，您必须将类的属性传递给正确实例化的超类 (React.Component)。有关更多信息，请阅读有关面向对象编程的书
我在您的代码中找不到语句({this.state.clicks} clicks})。
如果不使用this.state，请使用无状态组件
ReactDOM.render() 实际上创建组件并将其呈现到页面。 document.findElementById('main') 正在寻找 id="main" 的 html 元素，ReactDOM 可以将其渲染到该元素中。

我建议你在学习 React 之类的 js 框架之前先阅读一本基础书籍或学习 javascript 在线教程

【讨论】：