傳遞文本`prop`到`option`元素

我試圖呈現一個非常通用的<option/>標籤，我想通過它的一些道具，只是傳播他們的屬性。
<option {...props}>{props.text}</option>
正如你所看到的，我使用我的對象的text屬性來設置...以及元素的text屬性。
考慮這個對象中傳遞過來的props：
{ value: "someValue", text: "some text", "data-something": "something" }傳遞文本`prop`到`option`元素

與此對象通過，我將有value和data-something設置正確，但text會確定，但將通過一個很好的警告：

未知道具text對<option>標記...

我不想強制消費者使用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>

來源

2017-06-03 Sagiv b.g

你想要做的是拉出來的文本的屬性傳遞給目標

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

來源

2017-06-03 20:05:27

傳遞文本`prop`到`option`元素

回答

相關問題