Question

我试图渲染一个非常通用的<option/>标签，我想传递一些道具并将它们作为属性传播。
<option {...props}>{props.text}</option>
如您所见，我使用对象的text属性设置......以及元素的text属性。
考虑传递给props的这个对象：
{ value: "someValue", text: "some text", "data-something": "something" }

传入此对象后，我会正确设置value和data-something，但会设置text但会通过以下警告：

text代码上的未知道具<option> ...

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

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

Answer 1

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

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

将文本`prop`传递给`option`元素

1 个答案: