Log:2021-12-09

1.学习属性展开

class Person extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div>
        <h1>{this.props.name}</h1>
        <h3>{this.props.location}</h3>
      </div>
    );
  
  }
}

function EnglandPerson(){
  const props={name:"paul",location: "England"};
  return <Person {...props}/>
}

function SonComponent(props){
  const{name,...others}=props;
  return <button {...others}/>;

}

const FatherCommponent= () => {
  return (
    <div>
      <SonComponent name="test" onClick={() => {console.log('clicked!');}}>
      Click me!
      </SonComponent>
    </div>
  );


}



ReactDOM.render(
  <FatherCommponent />,
  document.getElementById('root')
);

2.在组件中迭代数组

function BookList (){
  const oneList=["thinking in C++","effective java","Redis in action"];
  return (
  <ul>
    {oneList.map((elem) => <li>{elem}</li>)}
  </ul>
  );
}

3.函数作为组件的children属性

function OffspringComponent(props){
  const count=props.count;
  let resultSet=[];
  for(let i=0;i<count;i++){
    resultSet.push(props.children(i));
  }
  return <div>{resultSet}</div>;
}

function ParentComponent(){
  return(
    <OffspringComponent count={10}>
     { (i) => <li>info{i}</li>} 
    </OffspringComponent>

  );
}

4.createReactClass用法

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});