Log:2021-12-08

1学习JSX的点语法（Dot Notation）

const MyFruits={
  apple: function getApple(props){
    return (
      <div>
        <h1>this is an {props.color} apple!</h1>
      </div>
    );
  }
  ,
  orange: function getOrange(props){
    return(
      <div>
        <h1> this is an {props.color} orange!</h1>
      </div>
    );
  }
}

function FruitSet(){
    return (
      <React.Fragment>
      <MyFruits.apple color="red"/>
      <MyFruits.orange color="yellow"/>
      </React.Fragment>
    );
  
}

2.不能在return 中使用表达式，需要使用表达式时，可先把它赋值给一个大写字母开头的变量，然后return 这个变量。

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

  render(){
    return (
      <div>
        <h2>{this.props.name} lang</h2>
      </div>
    );
  }

}

class Java extends React.Component{
  render(){
    return (
      <Language name="java"/>
    );
  }
}

class Reakt extends React.Component{
  render(){
    return (
      <Language name="react"/>
    );
  }
}



const components={
  a: Java,
  b: Reakt

};

function OneLanguage(){
  const One=components['b'];//定义一个变量，用来给return 用
  return <One />
}

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

3.表达式作为props

function NumberVerdict(props){
  let verdictResult;
  const limitition=props.limitition;
  if(props.number>limitition){
    verdictResult=<strong>bigger than {limitition}</strong>;
  }
  else{
    verdictResult=<strong>equals to or smaller than {limitition}</strong>
  }

  return (
    <div>
      <h1>{props.number} is {verdictResult}</h1>
    </div>
  );

}



ReactDOM.render(
  <NumberVerdict number={3}  limitition={60}/>,
  document.getElementById('root')
);