react更改数据渲染技巧

如果有一个UI组件，通过传入的数据进行数据渲染，现在需要对特殊的一些数据做特殊展示，一般有两种做法：

• 直接在UI组件上更改组件解构
• 将数据处理好再传入UI组件，UI组件只负责数据渲染

第二种做法的好处是不会使UI组件和数据产生强关联，但是也要保证UI组件处理数据是灵活的，如果展示数据类型恨死就无法做到了

简单例子：在 jsx 中，react组件也是一种普通的数据格式，可以使用其他数据类型进行存储

const data = {
    reactData: (
    	<div>
        	<P>这是一个react数据</P>
        </div>
    )
}

...render() {
    return (
    	<div>
        	{data.reactData}
        </div>
    )
}

利用这种思维，可以直接传进一个已经写好样式的react组件，然后UI组件只负责渲染数据

// UI组件
import React from 'react'

export default function Form(props) {
  return (
    <div>
      {props.data.map((item) => {
        return <ui>
          <li key={Math.random}><span> {item.title}</span></li>
          <li key={Math.random}>{item.content}</li>
        </ui>
      })}
    </div>
  )
}

// 传递数据
const data = [
  {
    title: 'TitleA', content: 'ContentA'
  },
  {
    title: 'TitleB', content: 'ContentB'
  }
]

class App extends Component { 
  render() {
    const handleData = (data) => {
      return data.map((item) => ({
        //  // 先将原来对象中的东西解构确保数据完整，然后覆盖更改原数据
        ...item,     
        title: (
          <span style={{color: 'red'}}>
            {item.title}
          </span>
        )
      }))
    }
    return (
      <Form data={handleData(data)} />
    )
  }
}