//组件间通信
//父组件向子组件通信
function ListItem({value}){
  return(
      <li>
        <span>{value}</span>
      </li>
  )
};
const data = [
  {id: 1, title: 'hello1', text: '暗室逢灯安抚'},
  {id: 2, title: 'hello2', text: '暗室逢灯as啊'},
  {id: 3, title: 'hello3', text: '安抚安抚父父'},
];
function ReactForms({list, title}){
  // const list = props.list; //上面的传参行为等于解构赋值 const list = props.list;
  // const title = props.title; //上面的传参行为等于解构赋值 const title = props.title;
  console.log(title)
  return(
      <div>
        <h2 title={title}>{title}</h2>
        <ul>
          {list.map((entry, index) => ( <ListItem key={ `list-${index}`} value={entry.text} /> ))}
        </ul>
      </div>
  )
};
class JSX extends React.Component{
  render () {
    return(
        <div><ReactForms list={data} title='这到底是为啥'/></div>
    )
  }
}