React技巧 - 《广于固志学习笔记》

DataTable数据表
MappedTable
MultiselectCheckbox
TreeView树状视图

DataTable数据表

数据表呈现一个表的行动态创建元素的数组。呈现一个<表>元素有两个列(ID和值)。使用Array.prototype。地图呈现每一项数据作为< tr >元素,包括其索引和价值,给它一个连接的两个关键的生产。

function DataTable({ data }) {
  return (
    <table><thead><tr>
          <th>ID</th>
          <th>Value</th>
        </tr></thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody></table>
      );}

MappedTable 　　

呈现一个表的行动态创建一个数组对象和属性名称的列表。　　　　
使用种(),Array.prototype.filter (), Array.prototype.includes()和Array.prototype.reduce()来产生一个filteredData数组,包含所有对象propertyNames中指定的键。　　
呈现一个<表>元素的一组列等于在propertyNames的数量值。　　
使用Array.prototype。地图呈现propertyNames数组中的每个值< th >元素。　　
使用Array.prototype。地图呈现filteredData数组中的每个对象作为< tr >元素,包含一个< td >中每一个关键对象

function MappedTable({ data, propertyNames }) {
  let filteredData = data.map(v =>
    Object.keys(v)
      .filter(k => propertyNames.includes(k))
      .reduce((acc, key) => ((acc[key] = v[key]), acc), {})
  );
  return (
    <table>
      <thead>
        <tr>
          {propertyNames.map(val => (
            <th key={`h_${val}`}>{val}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {filteredData.map((val, i) => (
          <tr key={`i_${i}`}>
            {propertyNames.map(p => (
              <td key={`i_${i}_${p}`}>{val[p]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

MultiselectCheckbox

呈现一个复选框列表,使用一个回调函数来将其选择的价值/值传递给父组件。　　　　
使用React.setState()来创建一个数据状态变量并设置其初始值等于选择道具。　　
创建一个函数用于切换开关检查更新onChange回调状态函数和调用的数据通过组件的道具。　　
呈现一个< ul >元素和使用Array.prototype.map()将数据状态变量映射到单个

与元素作为自己的孩子。　　
每个元素类型=“复选框”属性,并标记为只读的,作为它的点击事件是由父

元素的onClick处理程序。

const style = {
  listContainer: {
    listStyle: 'none',
    paddingLeft: 0
  },
  itemStyle: {
    cursor: 'pointer',
    padding: 5
  }
};
function MultiselectCheckbox({ options, onChange }) {
  const [data, setData] = React.useState(options);
  const toggle = item => {
    data.map((_, key) => {
      if (data[key].label === item.label) data[key].checked = !item.checked;
    });
    setData([...data]);
    onChange(data);
  };
  return (
    <ul style={style.listContainer}>
      {data.map(item => {
        return (
          <li key={item.label} style={style.itemStyle} onClick={() => toggle(item)}>
            <input readOnly type="checkbox" checked={item.checked || false} />
            {item.label}
          </li>
        );
      })}
    </ul>
  );
}

TreeView树状视图　　

呈现一个树视图的一个JSON对象或数组可折叠的内容。　　　　
对于某些道具使用对象destructuring设置默认值。　　
使用切换道具的价值来确定内容的初始状态(折叠/展开)。　　
使用React.setState()钩创建isToggled状态变量,并且给它的值最初提案。　　
返回一个< div >包装的内容组件和< span >元素,用于改变组件的isToggled状态。　　
确定组件的外观,基于isParentToggled isToggled,名称和Array.isArray()的数据。　　
对于每一个孩子在数据,确定它是一个对象或数组和递归子树。　　
否则,呈现一个< p >元素与适当的风格。

CSS

.tree-element {
  margin: 0;
  position: relative;
}
div.tree-element:before {
  content: '';
  position: absolute;
  top: 24px;
  left: 1px;
  height: calc(100% - 48px);
  border-left: 1px solid gray;
}
.toggler {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid gray;
  cursor: pointer;
}
.toggler.closed {
  transform: rotate(90deg);
}
.collapsed {
  display: none;
}

function TreeView({
  data,
  toggled = true,
  name = null,
  isLast = true,
  isChildElement = false,
  isParentToggled = true
}) {
  const [isToggled, setIsToggled] = React.useState(toggled);
  return (
    <div
      style={{ marginLeft: isChildElement ? 16 : 4 + 'px' }}
      className={isParentToggled ? 'tree-element' : 'tree-element collapsed'}
    >
      <span
        className={isToggled ? 'toggler' : 'toggler closed'}
        onClick={() => setIsToggled(!isToggled)}
      />
      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
      {Array.isArray(data) ? '[' : '{'}
      {!isToggled && '...'}
      {Object.keys(data).map((v, i, a) =>
        typeof data[v] == 'object' ? (
          <TreeView
            data={data[v]}
            isLast={i === a.length - 1}
            name={Array.isArray(data) ? null : v}
            isChildElement
            isParentToggled={isParentToggled && isToggled}
          />
        ) : (
          <p
            style={{ marginLeft: 16 + 'px' }}
            className={isToggled ? 'tree-element' : 'tree-element collapsed'}
          >
            {Array.isArray(data) ? '' : <strong>{v}: </strong>}
            {data[v]}
            {i === a.length - 1 ? '' : ','}
          </p>
        )
      )}
      {Array.isArray(data) ? ']' : '}'}
      {!isLast ? ',' : ''}
    </div>
  );
}