这篇文章有我正在寻找的答案,但他们使用的是过时的基于类的组件,我需要帮助将它们转换为功能。 How to create a dynamic prop name in React?。如果使用 React 功能组件回答,这篇文章将如何写。感谢您抽出宝贵时间。
答案 0 :(得分: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>