数据绑定

React

• base::jsx
• child::双向绑定

  动态解析js变量

  解析字符串

  示例

  return (
    <h1>
      {user.name}
    </h1>
  );

  return (
    <img
      className="avatar"
      src={user.imageUrl}
    />
  );

  解析对象

  <img
    className="avatar"
    src={user.imageUrl}
    alt={'Photo of ' + user.name}
    style={{
      width: user.imageSize,
      height: user.imageSize
    }}
  />

  style={{}} is not a special syntax, but a regular {} object inside the style={ }

  解析数组

  const products = [
    { title: 'Cabbage', id: 1 },
    { title: 'Garlic', id: 2 },
    { title: 'Apple', id: 3 },
  ];

  Inside your component, use the map() function to transform an array of products into an array of <li> items:

  const listItems = products.map(product =>
    <li key={product.id}>
      {product.title}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );

  指向原始笔记的链接