我正在读奥的《学习react 》.在这篇文章中，他们指出，我们可以通过创建一个名为"组件创建函数"的函数来创建组件，在这个函数中，我们可以提供所需的参数作为second parameter到React.createElement个函数.我也这么做了，但我没有得到任何结果.创建这样一个组件创建函数的最佳方法是什么？
var a = ['warm water', 'put egg to boil', 'boil finishes', 'scrape off shell'],
b = 'making eggs',
recipeArray = [],
name
function recipeWriter() {
return React.createElement(
'section', {
className: 'recipe'
},
React.createElement('h3', {
className: 'recipeName',
key: 0
}, name),
recipeArray.map((i, j) =>
React.createElement('li', {
key: j
}, i)
)
)
}
let el = ReactDOM.render(
React.createElement(recipeWriter, {
recipeArray: a,
name: b
}, null), document.getElementById('root'))#root {
background-color: cornsilk;
font: bold 1em monospace
}
.recipe {
background-color: aqua;
margin: 30px;
}
.recipeName {
font: 2em monospace;
color: red;
}
.steps {
color: darkgreen
}<div id="root"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>I want my output like this ->
var recipeArray = ['warm water', 'put egg to boil', 'boil finishes', 'scrape off shell'],
name = 'making eggs'
function recipeWriter() {
return React.createElement(
'section', {
className: 'recipe'
},
React.createElement('h3', {
className: 'recipeName',
key: 0
}, name),
recipeArray.map((i, j) =>
React.createElement('li', {
key: j
}, i)
)
)
}
let el = ReactDOM.render(
React.createElement(recipeWriter, null, null), document.getElementById('root'))#root {
background-color: cornsilk;
font: bold 1em monospace
}
.recipe {
background-color: aqua;
margin: 30px;
}
.recipeName {
font: 2em monospace;
color: red;
}
.steps {
color: darkgreen
}<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>