Question

我正在研究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>
        );
    }
}

'click'和this.refs.myComponentDiv.removeEventListener()中的第一个参数this.refs.myComponentDiv.removeEventListener()是什么意思？为什么必须将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>

谢谢你，一定会赞成并接受回答！

Answer 1

＆＃39;单击＆＃39;是在视口/元素中单击时创建的单击事件的名称
在扩展类React.Component时，必须将类的属性传递给正确实例化的超类（React.Component）。有关更多信息，请阅读有关面向对象编程的书
我在您的代码中找不到声明/** * JSONObject.NULL is equivalent to the value that JavaScript calls null, * whilst Java's null is equivalent to the value that JavaScript calls * undefined. */ private static final class Null { /** * A Null object is equal to the null value and to itself. * * @param object * An object to test for nullness. * @return true if the object parameter is the JSONObject.NULL object or * null. */ @Override public boolean equals(Object object) { return object == null || object == this; } }。
如果您不使用({this.state.clicks} clicks})，请使用无状态组件
ReactDOM.render（）实际上会为您的页面创建和呈现您的组件。 document.findElementById（＆＃39; main＆＃39;）正在寻找id =＆＃34; main＆＃34;的html元素。 ReactDOM可以将它呈现给这个元素。

在你学习像React这样的js框架之前，我建议你先读一本基础书或者在javascript中学习一个在线教程

ReactJS：addEventListener中的第一个参数，ReactDOM.render（）和（）在return语句中是什么意思？

1 个答案: