React JSX In Depth

09 May 2018

JSX In Depth主要是记录一些jsx编码时候要注意到的一些问题，之前我的两个blog：React Quick Start 2018和React学习笔记也说过一部分jsx的问题。

下面是我在JSX In Depth中的测试代码，在后面我会总结出来

                //React Must Be in Scope
                import React from 'react';
                import ReactDOM from 'react-dom';

                //Using Dot Notation for JSX Type
                //考虑组件分组的时候使用
                const MyComponents = {
                  DatePicker: function DatePicker(props) {
                    return <div onClick={props.onClick} >Imagine a {props.color} datepicker here.</div>;
                  },
                  TextInput: function TextInput(props){
                    //if you want a value like false, true, null, or undefined to appear in the output, 
                    //you have to convert it to a string first
                    return <div onClick={props.onClick} >this is { String(props.sum) } text input.</div>
                  } 
                }

                class JsxInDepth extends React.Component {
                    constructor(props) {
                        super(props);
                        this.clickEventHandler = this.clickEventHandler.bind(this);
                    }
                    clickEventHandler(e){
                        console.log(e.target.textContent);
                    }
                    render(){
                        const self = this;
                        //这个地方一定是和分组配合使用的，这两个地方都应该是import进来的
                        const propsList = {
                            TextInput: {
                                sum: 2,
                                onClick: self.clickEventHandler
                            }
                        }
                        return(
                            <div>
                                <h1>1.JSX In Depth</h1>
                                {
                                    //User-Defined Components Must Be Capitalized
                                }
                                <MyComponents.DatePicker color="blue" onClick={ this.clickEventHandler } />
                                {
                                    //if you already have props as an object, and you want to pass it in JSX, 
                                    //you can use ... as a “spread” operator to pass the whole props object. 
                                }
                                <MyComponents.TextInput {...propsList.TextInput} />
                                {
                                    //Wrong! JSX type can't be an expression.
                                    //return <components[props.storyType] story={props.story} />;
                                }
                            </div>
                        )
                    }
                }

                export { JsxInDepth as default };

            

1.JSX文件中必须引用import React from 'react';(this blog)

2.同一大组中对其组件分组可以考虑用Dot Notation, 加上配合使用的propsList，两者都可以用import传递进来。（this blog）

3.自定义的组件必须在引用的时候首字母大写（this）

4.you can use ... as a “spread” operator to pass the whole props object（this）

5.JSX type can't be an expression.like components[props.storyType] (this)