dynamically-add-child-components-in-react

dynamically-add-child-components-in-react.md

dynamically-add-child-components-in-react

https://stackoverflow.com/questions/36651583/dynamically-add-child-components-in-react

    
var App = require('./App.js');
var SampleComponent = require('./SampleComponent.js');
ReactDOM.render(
    <App>
        <SampleComponent name="SomeName"/> 
    <App>, 
    document.body
);

    
var App = React.createClass({
    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                {
                    this.props.children
                }
            </div>
        );
    }
});

    
var App = React.createClass({

    getInitialState: function(){
        return [
            {id:1,name:"Some Name"}
        ]
    },

    addChild: function() {
        // State change will cause component re-render
        this.setState(this.state.concat([
            {id:2,name:"Another Name"}
        ]))
    }

    render: function() {
        return (
            <div>
                <h1>App main component! </h1>
                <button onClick={this.addChild}>Add component</button>
                {
                    this.state.map((item) => (
                        <SampleComponent key={item.id} name={item.name}/>
                    ))
                }
            </div>
        );
    }

});

object.keys-object[keys]

const data = [
    {"id": "1", "name": "name_1", "parent_id": "0", "depth": "0"},
    {"id": "2", "name": "name_2", "parent_id": "0", "depth": "0"},
    {"id": "3", "name": "name_3", "parent_id": "1", "depth": "1"},
    {"id": "4", "name": "name_4", "parent_id": "3", "depth": "2"}
];

let object = data[0];

for (let key in object) {
    if (object.hasOwnProperty(key)) {
        console.log(`key = ${key}`);
        let key1 = object.key;
        let key2 = object[key];
        console.log(`object.${key} = ${key1}`);
        console.log(`object[${key}] = ${key2}`);
    }
}

url = `https://cdn.xgqfrms.xyz/json/datalist.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    let obj_length = Object.keys(json).length;
    console.log(`json length = ${obj_length}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos.length = ${Object.keys(repos).length}`);
    array.forEach(function(element) {
        // 
    }, this);
    for (let key in object) {
        if (object.hasOwnProperty(key)) {
            console.log(`key = ${key}`);
            let key1 = object.key;
            let key2 = object[key];
            console.log(`object.${key} = ${key1}`);
            console.log(`object[${key}] = ${key2}`);
        }
    }
    for (let key in object) {
        if (object.hasOwnProperty(key)) {
            let element = object[key];
            console.log(`object.${key} = ${element}`);
        }
    }
    for (var index = 0; index < array.length; index++) {
        var element = array[index];
        
    }
    console.log(`id = ${repos[0].id}`);
    console.log(`name = ${repos[0].name}`);
    console.log(`isParent = ${repos[0].isParent}`);
});

xgqfrms-GitHub/Node-CLI-Tools#15

github API

let username = `xgqfrms-GitHub`;
    repo = `Node-CLI-Tools/commits`;


const url = `https://api.github.com/repos/${username}/${repo}`;

// https://api.github.com/repos/xgqfrms-GitHub/Node-CLI-Tools/commits

// Error API: https://api.github.com/users/${username}/${repo}


fetch(`https://api.github.com/repos/${username}/${repo}`,{
    data: {
        client_id: '08ecc2f68d922f18800e',
        client_secret: '5846d428b5340812b76c9637eceaee979340b922'
    }
})
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    console.log(`repos = ${repos.length}`);
    console.log(`repos$ 0  = ${repos[0]}`);
    console.log(`repos$ 1  = ${repos[1]}`);
    for (let i = 0; i < repos.length; i++) {
        console.log(`repos${i}  = ${repos[i]}`);
    }
});

// https://api.github.com/users/xgqfrms

// https://api.github.com/users/xgqfrms/react2 ???





let nct = ((username=`xgqfrms-GitHub`, repo=`Node-CLI-Tools`) => {
    fetch(`https://api.github.com/repos/${username}/${repo}/commits`,{
        data: {
            client_id: '08ecc2f68d922f18800e',
            client_secret: '5846d428b5340812b76c9637eceaee979340b922'
        }
    })
    .then((response) => response.json())
    .then((json)=> {
        return repos = json;
    })
    .then((repos)=>{
        console.log(repos);
    });
})();


/*

API

https://developer.github.com/v3/repos/

https://developer.github.com/v3/users/

https://developer.github.com/v3/repos/#list-user-repositories

https://developer.github.com/v3/repos/#list-organization-repositories

*/

fetch(`https://api.github.com/orgs/webgeeker/repos/`,{
    data: {
        client_id: '08ecc2f68d922f18800e',
        client_secret: '5846d428b5340812b76c9637eceaee979340b922'
    }
})
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
});





fetch(`https://api.github.com/users`,{
    data: {
        client_id: '08ecc2f68d922f18800e',
        client_secret: '5846d428b5340812b76c9637eceaee979340b922'
    }
})
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
});




fetch(`https://api.github.com/users/xyzdata`,{
    data: {
        client_id: '08ecc2f68d922f18800e',
        client_secret: '5846d428b5340812b76c9637eceaee979340b922'
    }
})
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
});

React & GraphQL

https://gist.github.com/xgqfrms-GitHub/d3f1ac685335d481572d5390d7c31a1c

dynamically-add-child-components-in-react

https://gist.github.com/xyzdata/5acc4a357722e9e2636009fbd6846338#gistcomment-2133571

how to dynamically generate nested li list using js

https://gist.github.com/xyzdata/50d9af7fe5749fe199146e4e5e2f3f1e#gistcomment-2133425

MDN

let url = `https://raw.githubusercontent.com/xyzdata/json/master/datas/ntb-F9/csjj-old.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    // Object.keys(myArray).length
    console.log(`json.length = ${Object.keys(repos).length}`);
    console.log(`Button = ${repos.ToolBar.Button[0]}`);
    console.log(`Button = ${repos.ToolBar.Button[1]}`);
    // "@name"
    // @json-error.json
    let name = "@name";
    console.log(`name = ${repos.name}`);
});



url = `https://raw.githubusercontent.com/xyzdata/json/master/datas/ntb-F9/csjj.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos = ${repos}`);
    // Object.keys(myArray).length
    console.log(`json.length = ${Object.keys(repos).length}`);
    console.log(`Button[0] = ${repos.ToolBar.Button[0]}`);
    console.log(`ToolBar.Button[1].name = ${repos.ToolBar.Button[1].name}`);
    console.log(`ToolBar.Button[1].Captio = ${repos.ToolBar.Button[1].Caption}`);
    console.log(`name = ${repos.name}`);
    console.log(`name = ${repos.caption}`);
    console.log(`ToolBar.Caption = ${repos.ToolBar.Caption}`);
    console.log(`ToolBar.name= ${repos.ToolBar.name}`);
});













url = `https://cdn.xgqfrms.xyz/json/user1.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`firstName = ${repos.firstName}`);
    console.log(`age = ${repos.age}`);
    console.log(`city = ${repos.address.city}`);
    console.log(`phoneNumber = ${repos.phoneNumber[0].number}`);
    console.log(`repos.length = ${repos.length}`);
});





const data = [
    {"id": "1", "name": "name_1", "parent_id": "0", "depth": "0"},
    {"id": "2", "name": "name_2", "parent_id": "0", "depth": "0"},
    {"id": "3", "name": "name_3", "parent_id": "1", "depth": "1"},
    {"id": "4", "name": "name_4", "parent_id": "3", "depth": "2"}
];

let object = data[0];

for (let key in object) {
    if (object.hasOwnProperty(key)) {
        console.log(`key = ${key}`);
        let key1 = object.key;
        let key2 = object[key];
        console.log(`object.${key} = ${key1}`);
        console.log(`object[${key}] = ${key2}`);
    }
}


url = `https://cdn.xgqfrms.xyz/json/datalist.json`;

fetch(url)
.then((response) => response.json())
.then((json)=> {
    console.log(`json = ${json}`);
    let obj_length = Object.keys(json).length;
    console.log(`json length = ${obj_length}`);
    return repos = json;
})
.then((repos)=>{
    console.log(`repos.length = ${Object.keys(repos).length}`);
    array.forEach(function(element) {
        // 
    }, this);
    for (let key in object) {
        if (object.hasOwnProperty(key)) {
            console.log(`key = ${key}`);
            let key1 = object.key;
            let key2 = object[key];
            console.log(`object.${key} = ${key1}`);
            console.log(`object[${key}] = ${key2}`);
        }
    }
    for (let key in object) {
        if (object.hasOwnProperty(key)) {
            // 
            let element = object[key];
            console.log(`object.${key} = ${element}`);
        }
    }
    for (var index = 0; index < array.length; index++) {
        var element = array[index];
        
    }
    console.log(`id = ${repos[0].id}`);
    console.log(`name = ${repos[0].name}`);
    console.log(`isParent = ${repos[0].isParent}`);
});




let obj = {a: 1, b: 2, c: 3};

for (var prop in obj) {
    console.log(`obj.${prop} = ${obj[prop]}`);
}


/*

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of



The for...of statement creates a loop iterating over iterable objects 
(including Array, Map, Set, String, TypedArray, arguments object and so on), 
invoking a custom iteration hook with statements to be executed for the value of each distinct property.


for...of 语句在可迭代对象
(包括 Array, Map, Set, String, TypedArray，arguments 对象等等)上创建一个迭代循环
，对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩.


let iterable = [10, 20, 30];

for (const value of iterable) {
    console.log(value);
}
// 10
// 20
// 30

let iterable = "boo";

for (let value of iterable) {
    console.log(value);
}
// "b"
// "o"
// "o"

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
    console.log(value);
}
// 0
// 255


let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
    paragraph.classList.add("read");
}

// Set 对象允许你存储任何类型的唯一值，无论是(原始值或者对象引用)。


https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set


// Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map


// 一个TypedArray 对象描述一个底层的二进制数据缓存区的一个类似数组(array-like)视图。


https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray








*/


/*

// Object.keys() 方法返回一个给定对象自己的枚举属性的数组，其顺序与 for...in 循环(区别在于，for-in 循环也枚举原型链中的属性)。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys


// for...in 语句以原始插入顺序迭代一个对象的可枚举属性。 对于每个不同的属性，可以执行语句

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

*/




// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys


/*

var arr = ['a', 'b', 'c'];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }


*/

https://gist.github.com/xyzdata/50d9af7fe5749fe199146e4e5e2f3f1e

https://github.com/xgqfrms/RAIO/issues/3

https://gist.github.com/xyzdata/d9ee0f00cf4068f4ca631219b5392e1b

Ant bug & Solution

https://gist.github.com/xgqfrms-GitHub/4cf5cc3a67a9ed094cf008f13457bfac