chọn lọc render thuộc tính thành phần tùy chọn trong Phản ứng JSX

Question

Tôi có một trường hợp sử dụng nơi tôi có một phần hình ảnh mà có một yêu cầu "src" thuộc tính và một tùy chọn "liên kết" thuộc tính mà trông như thế này:

var Image = React.createClass({ 

propTypes: { 
    link: React.PropTypes.string, 
    event: React.PropTypes.object, 
    src: React.PropTypes.string.isRequired 
}, 

handleClick: function(event, link) { 
    analytics.track(event) 
    .then(function() { 
     window.location = link; 
    }); 
}, 

render: function() { 
    return (
    <img className='image' src={this.props.src} onClick={this.handleClick.bind(this, this.props.event, this.props.link)} /> 
); 
} }); 

Nếu Tôi muốn chọn lọc bao gồm các đạo cụ tùy chọn khi tôi gọi thành phần Hình ảnh, làm thế nào tôi sẽ làm điều đó một cách tao nhã? Ý tưởng ban đầu của tôi là để làm một biểu ternary như thế này, trừ trường hợp này không phải là hợp lệ JSX:

render: function() { 
    return (
     <Image src={this.props.src} {this.props.link.hasOwnProperty('value') ? link=this.props.link.value : ''} /> 
    ) 
} 

Trong ví dụ trên "this.props.link" là một đối tượng có thể có hoặc không có thể chứa một tài sản gọi là " giá trị "bao gồm siêu liên kết để duyệt đến khi Hình ảnh được nhấp. Ngoài ra, thay vì chỉ đơn giản là cung cấp một chuỗi rỗng làm giá trị cho liên kết "prop", tôi muốn chỉ đơn giản là để nó ra hoàn toàn nếu không có hiện diện link.value.

Lý do của tôi cho điều này là để trên thành phần hình ảnh tôi có thể thêm css "img: hover {cursor: pointer;}" chỉ khi img thực sự liên kết ở đâu đó, trái ngược với cài đặt nó trên toàn cầu vi phạm các quy tắc UX ứng dụng của tôi. Tôi biết rằng tôi có thể chỉ đơn giản là hiển thị "liên kết" prop bên trong một đại số, nơi nó bao gồm giá trị của liên kết nếu nó tồn tại và là một chuỗi rỗng nếu nó không, nhưng vì lợi ích của tò mò tôi muốn xem nếu có thể có một cách khác để thực hiện điều này.

Tôi cũng muốn tránh phải làm một loạt các báo cáo có điều kiện mà tạo ra rất nhiều mã JSX dư thừa như thế này:

render: function() { 
    if (this.props.link.hasOwnProperty('value')) { 
     return <Image link={this.props.link.value} src={this.props.src.value} />; 
    } else { 
     return <Image src={this.props.src.value} />; 
    } 
    .... // other optional properties 
} 

Hãy tưởng tượng như thế nào ra khỏi bàn tay đó sẽ nhận được nếu bạn có rất nhiều các đạo cụ tùy chọn mà bạn muốn để lại ...

Answer 1

Bạn dường như đang suy nghĩ quá mức.

<Image src={this.props.src} link={this.props.link.value} /> 

Trong các thành phần của bạn, bạn thường nên xử lý bất kỳ giá trị giả nào bị bỏ qua.

if (this.props.link) { 
    ... 
} 

Trường hợp ngoại lệ sẽ là số, hoặc trường hợp hiếm (và tốt nhất tránh được) khi đó là mặc định boolean là true.

---

Một câu trả lời trực tiếp hơn sẽ được sử dụng lây lan (mới trong 0,12).

var props = {src: this.props.src}; 
if (this.props.link.hasOwnProperty('value')) { 
    props.link = this.props.link.value; 
} 

<Image {...props} /> 

hoặc

var extraProps = {}; 
if (this.props.link.hasOwnProperty('value')) { 
    extraProps.link = this.props.link.value; 
} 

<Image src={this.props.src} {...extraProps} />