将文本“prop”传递给“option”元素

Question

我正在尝试渲染一个非常通用的 <option/> 标签，我想向它传递一些道具并将它们作为属性传播。
<option {...props}>{props.text}</option>
如您所见，我正在使用我的对象的 text 属性来设置...好吧，元素的 text 属性。
将此对象作为 props:
传入 { value: "someValue", text: "some text", "data-something": "something" }

传入此对象后，我将正确设置 value 和 data-something，虽然 text 会设置，但会通过一个很好的警告：

Unknown prop text on <option> tag...

我不想强迫消费者使用 label 属性而不是 text。
请记住，消费者可以将任何属性传递给此选项，包括 data-*。有没有办法以一种优雅的方式传播对象并排除属性？
或者也许有不同的方法来设置 DOM 元素的 text 属性？

const cities = [
    {
        value: "nyc",
        text: "New York",
        'data-type': "city"
    },
    {
        value: "lnd",
        text: "London",
        'data-type': "city"
    },
    {
        value: "TLV",
        text: "Tel Aviv",
        'data-type': "city"
    }
]

const Option = (props) => {
    return (
        <option {...props}>{props.text}</option>
    )
}

class Selector extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedObject: props.selectedObject || {
                value: "defualt",
                text: "Select...",
                'data-type': "default"
            }
        }
        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,
            'data-type': selectedOption.dataset.type
        };
        const nextState = Object.assign({}, ...selectedObject, ...nextSelectedObject);
        this.setState({
            selectedObject: nextState
        }, onChange && onChange(nextSelectedObject));
    }

    render() {
        const { selectedObject } = this.state;
        const { options } = this.props;
        return (
            <div>
                <select name="" id="" value={selectedObject.value} onChange={this.onChange}>
                    {options.map((o,i) => <Option key={i} {...o} />)}
                </select>
            </div>
        )
    }
}

ReactDOM.render(<Selector options={cities} />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

您要做的是将文本从属性中拉出以传递给对象

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

将文本“prop”传递给“option”元素

Passing a text `prop` to an `option` element

attributes

html-select

ecmascript-6

reactjs