如何使用功能组件在反应中创建动态道具名称

【问题标题】：How to create a dynamic prop name in react using functional components如何使用功能组件在反应中创建动态道具名称
【发布时间】：2021-06-11 17:42:54
【问题描述】：

这篇文章有我正在寻找的答案，但他们使用的是过时的基于类的组件，我需要帮助将它们转换为功能。 How to create a dynamic prop name in React?。如果使用反应功能组件回答这篇文章将如何编写。感谢您的宝贵时间。

【问题讨论】：

标签： reactjs react-hooks create-react-app react-props react-functional-component

【解决方案1】：

function Test(props) {
  const renderFromProps = () => {
    return Object.keys(props)
    .map((propKey) =>
      <h3>{props[propKey]}</h3>
    );
  };
  
  return (
   <div>
    <h1>One way </h1>
    <hr/>
    <h3>{props.name}</h3>
    <h3>{props.type}</h3>
    <h3>{props.value}</h3>
    <hr/>
    <h1> Another way </h1>
    <hr/>
    { renderFromProps()}
   </div>
 );
}

const dynamicProps = { name:"Test", type:"String", value:"Hi" };

ReactDOM.render(
  <Test {...dynamicProps} />,
  document.getElementById('root')
);

<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>
<div id="root">
</div>

【讨论】：