是否可以编写通用组件？ （反应/打字稿）

Question

是否可以编写通用组件？它接收一些具有相似数据的对象（例如：id、title、text、date）并呈现它。但是所有对象都有不同的键名。比如三个对象，都有id、title、text、date：

obj1 {id: 1, textVar: 'textString1', titleVar: 'titleString1', date1: '2000-10-10'}

obj2 {id: 2, title2: 'titleString2', someDate: '2001-11-11', otherTextVar: 'textString2'}

obj3 {id: 3, otherText3: 'textString3', otherDate: '2000-10-10', newsTitle: 'titleString3'}

是否可以编写通用组件，它可以与任何对象一起使用？

interface UCompProps {
    id: number,
    title: string,
    text: string,
    date: string,
  }, 
}

const UComponent: React.FC<UCompProps> = (props) => {
  const { id, title, text, date } = props;
  return (
    <>
      <div>{id}</div>
      <div>{title}</div>
      <div>{text}</div>
      <div>{date}</div>
    </>
  )
}

export default UCompProps

不知道怎么做。有什么建议怎么做吗？

Answer 1

如果你知道所有对象的结构，那么你可以映射这些对象的数组。

vlc

您还可以为每种类型的对象定义映射函数：

<div> {props.children} </div> 

或者你可以在映射每个数组后将它们一起渲染

// in parent:
return (
  <div>
    {arrayOfobjects1
      .map(obj1=>({
        id:obj1.id, title:obj1.titleVar , text:obj1.textVar, date: obj1.date1
      }))
      .map(props=><Ucomponent key={props.id} {...props} />)
    }
  </div>
)

Answer 2

如果 id、title、text、date 的顺序相同，那么您可以轻松使用 Object.values()

const UComponent = (props) => {
  const { id, title, text, date } = props;
  
  return (
    <div>
      <div>ID: {id}</div>
      <div>TITLE: {title}</div>
      <div>TEXT: {text}</div>
      <div>DATE: {date}</div>
      <br/>
    </div>
  )
}

const App = (props) => {
  const { data } = props;

  const components = data.map((obj) => {
    const [id, title, text, date] = Object.values(obj);
    return <UComponent id={id} title={title} text={text} date={date} />;
  });

  return (
    <div>
      {components}
    </div>
  )
}

const objs = [
  {id: 1, titleVar: 'titleString1', date1: '2000-10-10', textVar: 'textString1'},
  {id: 2, title2: 'titleString2', someDate: '2001-11-11', otherTextVar: 'textString2'},
  {id: 3, newsTitle: 'titleString3', otherDate: '2000-10-10', otherText3: 'textString3'},
];

ReactDOM.render(
  <App data={objs} />,
  document.getElementById("react")
);

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>