react & repl

https://jscomplete.com/repl


// props is an object!

// message.text => array of objects
class MessageList extends React.Component {
    getChildren = () => {
        //
    }
    render() {
        const children = this.props.messages.map(
            (message, index) => {
                //console.log(`message = `, message);
                    console.log(`index = `, index);
                //console.log(`typeof index = `, typeof index);
                let xindex = 'id_' + index; 
                console.log(`xindex = `, xindex);
                //console.log(`typeof xindex = `, typeof xindex);
                return(
                    <Message
                        key={index}
                        indexkey={index}
                        text={message.text}
                        color={message.color}
                        xyzClick={this.props.xyzClick}
                    />
                );
            }
        );
        const styles = {
                css1: {
                    color: 'red'
            },
            css2: {
                    color: '#0f0'
            }
        }
        return(
            <div>
                children = {children}
                <hr />
                <div>
                    BAD: <br />
                    {/* this.props = {this.props} */}
                    <div style={styles.css1}>
                        this.props.children = {this.props.color}
                    </div>
                    {/* this.props.arr = {this.props.arr} */}
                    {/* this.props.obj = {this.props.obj} */}
                    <br />
                    <p style={styles.css2}>
                        Object Error, need using map items to item
                    </p>
                </div>
            </div>
        );
    }
}

// text={message.text} => message object
class Message extends React.Component {
    render() {
            //console.log(`this.props.text = `, this.props.text);
        //console.log(`this.props.key= `, this.props.key);
        let style = `
                color: red;
            font-size: 23px;
        `;
        if(this.props.key === undefined){
                //alert(`smg!`);
            console.log(`%c this.props.key= \n`, style, this.props.key);
        }
        return (
            <div>
                <hr />
                this.props.key = {this.props.key}
                <br />
                this.props.indexkey = {this.props.indexkey}
                <br />
                this.props.text = {this.props.text}
                <br />
                this.props.color = <span style={{backgroundColor: this.props.color}}>{this.props.color}</span>
                <br />
                <Button color={this.props.color} xyzClick={this.props.xyzClick}>
                    <span style={{color: '#fff'}}>Delete</span>
                </Button>
            </div>
        );
    }
}

// props.children === <span style={{color: '#fff'}}>Delete</span> ??? 
class Button extends React.Component {
    render() {
        return (
            <button
                style={{background: this.props.color}} 
                onClick={(e) => this.props.xyzClick(e)} 
                >
                {this.props.children}
            </button>
        );
    }
}

const text = [
    {
    text: "text 1",
    color: "red"
    },
    {
    text: "text 2",
    color: "blue"
    },
    {
    text: "text 3",
    color: "grey"
    },
    {
    text: "text 4",
    color: "green"
    },
    {
    text: "text 5",
    color: "#f0f"
    }
];
const color = "green";
const ArrayTest = [1, 2, 3];
const ObjectTest = {"key": "value"};

class App extends React.Component{
    constructor(props){
        super(props);
        this.state  = {
            showSate: false
        };
    }
    setModalVisible = (value) => {
        console.log(`showSate`, this.state.showSate);
        console.log(`value`, value);
        this.setState({
            showSate: value
        });
        // 状态更新可能是异步的
        setTimeout(() => {
                console.log(`showSate`, this.state.showSate);
        });
    };
    XC = (e) => {
        let m = e.toString();
        console.log(e, m);
        return alert(`e.toString(); =\n`, m);
    };
  render(){
      return(
          <div>
               <div>
                   <button onClick={() => console.log(`smg`)}>
                       onClick
                   </button>
                   <button onClick={()=>this.setModalVisible(true)}>
                       showModal{this.state.showSate}
                   </button>
               </div>
               <MessageList
                   messages={text}
                   color={color}
                   arr={ArrayTest}
                   obj={ObjectTest}
                   xyzClick={this.XC}/>
          </div>
      );
    }
};

export default App;

ReactDOM.render(
    <App />,
    mountNode
);

// class props & this.props.onClickFunction

class PropsTest extends React.Component{
    constructor(props){
        super(props);
    }
    render() {
        // need this
        return (
            <div>
                {/* 
                    // OK
                    <button onClick={this.props.onClickFunction} >
                    <button onClick={() => this.props.onClickFunction()} >
                    // Error
                    <button onClick={this.props.onClickFunction()} >
                */}
                <button onClick={() => this.props.onClickFunction()} >
                    `this` Add counter
                </button>
                <p>
                    this state is 
                    <span 
                        style={{color: "#0ff", fontSize: "32px"}}
                        >
                        {this.props.counter}
                    </span>
                </p>
            </div>
        );
    };
};

// function props & no need this

// 无状态组件，函数组件

const Test = (props) =>{
    return (
        <div>
            <button onClick={props.onClickFunction} >
                Add `props` counter
            </button>
            <p
                style={{color: "#0ff", fontSize: "32px"}}
                >
                {props.counter}
            </p>
        </div>
    );
};

// this.setState((revState, props) => {})
// https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

// 有状态组件，React.Component 子类组件

class App extends React.Component{
    state = {
        counter: 1
    };
    addCounter = (e) => {
        console.log(`counter`, this.state.counter);
        console.log(`e =`, e);
        this.setState(
          (prevState, props) => (
              {
                  counter: prevState.counter + 1
              }
          )
        );
        // 状态更新可能是异步的
        setTimeout(() => {
                console.log(`counter`, this.state.counter);
        });
    };
    render(){
        // onClickFunction={this.addCounter} , 
        // 不可以在父组件上直接调用父组件自身的方法来修改state，
        // 只可以方法通过props传递给子组件，在子组件上调用修改state的方法
        /* 
        在父组件上直接调用父组件自身的方法来修改 state，调用的方式不对！() => { return ???;} 
        */
        return(
            <div>
                <PropsTest 
                    onClickFunction={this.addCounter}
                    counter={this.state.counter}
                    />
                <Test 
                    onClickFunction={this.addCounter}
                    counter={this.state.counter}
                    />
            </div>
        );
    }
}

// 字符串组件，变量组件, element 元素

// https://facebook.github.io/react/docs/rendering-elements.html#rendering-an-element-into-the-dom

const element = <h1>Hello, world</h1>;

export default App;

const props = {
    name: "xgqfrms",
    age: 17
};

ReactDOM.render(
    <div>
        <App {...props}/>
    </div>
    , mountNode
);

xyz-data / redux-seeds

react & repl #9

react & repl