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')
);