Reactjs 将文本'prop'传递给'option'元素

我试图呈现一个非常通用的

标记，我想给它传递一些道具，并将它们作为属性传播。

{props.text}

如您所见，我正在使用对象的

text

属性设置。。。以及元素的

文本
属性。

将此对象视为<代码>道具< /代码>：

{
值：“someValue”，
文本：“一些文本”，
“数据某物”：“某物”
}

传入此对象后，我将正确设置
值
和
数据something
，虽然
文本
将被设置，但将通过一个很好的警告：

标签上的未知属性
文本

我不想强迫消费者使用
标签
属性而不是
文本


请记住，使用者可以将任何属性传递到此选项，包括
数据-*
。
是否有一种方法可以以优雅的方式传播对象并排除属性？

或者可能有一种不同的方法来设置DOM元素的
text
属性


const cities=[
{
值：“纽约市”，
案文：“纽约”，
“数据类型”：“城市”
},
{
值：“lnd”，
案文：“伦敦”，
“数据类型”：“城市”
},
{
值：“TLV”，
文本：“特拉维夫”，
“数据类型”：“城市”
}
]
常量选项=（道具）=>{
返回(
{props.text}
)
}
类选择器扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
selectedObject:props.selectedObject | |{
值：“解除警报”，
文本：“选择…”，
“数据类型”：“默认值”
}
}
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
const{onChange}=this.props；
const{selectedObject}=this.state；
const selectedOption=e.target.selectedOptions[0]；
const nextSelectedObject={
value:selectedOption.value，
text:selectedOption.text，
“数据类型”：selectedOption.dataset.type
};
const nextState=Object.assign（{}，…selectedObject，…nextSelectedObject）；
这是我的国家({
所选对象：下一个状态
}，onChange&&onChange（nextSelectedObject））；
}
render（）{
const{selectedObject}=this.state；
const{options}=this.props；
返回(
{options.map（（o，i）=>）}
)
}
}
render（，document.getElementById（“根”））
您要做的是从属性中提取文本以传递给对象

const Option = (props) => {
    const toExtendProps = Object.assign({}, props);
    delete toExtendProps.text; 
    return (
        <option {...toExtendProps }>{props.text}</option>
    )
}

const选项=（道具）=>{
const-toExtendProps=Object.assign（{}，props）；
删除toExtendProps.text；
返回(
{props.text}
)
}