jscomplete & stackoverflow

jscomplete-stackoverflow.md

jscomplete & stackoverflow

https://stackoverflow.com/questions/28452358/what-is-the-meaning-of-this-props-in-reactjs#

https://jscomplete.com/repl/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
    </div>
    , mountNode
);

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          <div
              name={name}
              age={age}
              country={country}>
              Content Here
              <ul>
                <li>name={props.name}</li>
                <li>age={props.age}</li>
                <li>country={props.country}</li>
              </ul>
          </div>
        );
    }
}

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
        <hr/>
        <TestDemo {...props}/>
    </div>
    , mountNode
);

https://stackoverflow.com/a/46066379/8202629

https://github.com/gildata/RAIO/issues/87

https://github.com/gildata/RAIO/issues/136#issuecomment-327361743