Làm cách nào để thêm thuộc tính có điều kiện vào các thành phần React?

630
Remi Sture 2015-07-02 04:07.

Có cách nào để chỉ thêm các thuộc tính vào một thành phần React nếu một điều kiện nhất định được đáp ứng không?

Tôi được cho là thêm các thuộc tính bắt buộc và readOnly để tạo thành phần tử dựa trên lệnh gọi Ajax sau khi kết xuất, nhưng tôi không thể biết cách giải quyết vấn đề này vì readOnly = "false" không giống như việc bỏ qua hoàn toàn thuộc tính.

Ví dụ dưới đây sẽ giải thích những gì tôi muốn, nhưng nó sẽ không hoạt động (Lỗi phân tích cú pháp: Số nhận dạng không mong muốn).

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

13 answers

595
juandemarco 2015-07-02 04:23.

Rõ ràng, đối với một số thuộc tính nhất định, React đủ thông minh để loại bỏ thuộc tính nếu giá trị bạn chuyển cho nó không phải là sự thật. Ví dụ:

const InputComponent = function() {
    const required = true;
    const disabled = false;

    return (
        <input type="text" disabled={disabled} required={required} />
    );
}

sẽ cho kết quả:

<input type="text" required>

Cập nhật: nếu ai đó tò mò về cách / tại sao điều này xảy ra, bạn có thể tìm chi tiết trong mã nguồn của ReactDOM, cụ thể là ở dòng 30167 của tệp DOMProperty.js .

433
Brigand 2015-07-02 04:34.

Làm cách nào để thêm thuộc tính có điều kiện vào các thành phần React? thường đúng, nhưng đây là một lựa chọn khác.

Xây dựng một đối tượng theo cách bạn thích:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

Kết xuất với spread, cũng có thể chuyển các đạo cụ khác theo tùy chọn.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />
342
Arman Yeghiazaryan 2016-02-16 23:17.

Dưới đây là một ví dụ của việc sử dụng Bootstrap 's Buttonqua Phản ứng-Bootstrap (phiên bản 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

Tùy thuộc vào điều kiện, một trong hai {bsStyle: 'success'}hoặc {}sẽ được trả lại. Toán tử lây lan sau đó sẽ lây lan các thuộc tính của đối tượng trả về cho Buttonthành phần. Trong trường hợp giả mạo, vì không có thuộc tính nào tồn tại trên đối tượng được trả về nên sẽ không có gì được chuyển cho thành phần.


Một cách khác dựa trên Làm cách nào để thêm thuộc tính có điều kiện vào các thành phần React? :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

Sự khác biệt nhỏ duy nhất là trong ví dụ thứ hai <Button/>, propsđối tượng của thành phần bên trong sẽ có một khóa bsStylevới giá trị là undefined.

101
Season 2016-12-08 18:35.

Đây là một giải pháp thay thế.

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

Hoặc phiên bản nội tuyến của nó

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);
44
Tony Tai Nguyen 2018-02-16 11:05.

Đây là một cách tôi làm điều đó.

Với một điều kiện :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

Tôi vẫn thích sử dụng cách thông thường để chuyển các đạo cụ xuống, vì nó dễ đọc hơn (theo ý kiến ​​của tôi) trong trường hợp không có bất kỳ điều kiện nào.

Không có điều kiện :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />
26
Mina Luke 2017-09-02 20:02.

Giả sử chúng tôi muốn thêm thuộc tính tùy chỉnh (sử dụng aria- * hoặc data- *) nếu điều kiện là đúng:

{...this.props.isTrue && {'aria-name' : 'something here'}}

Giả sử chúng ta muốn thêm thuộc tính style nếu một điều kiện là đúng:

{...this.props.isTrue && {style : {color: 'red'}}}
20
GijsjanB 2016-10-25 04:49.

Bạn có thể sử dụng cùng một phím tắt, được sử dụng để thêm / bớt (các phần của) thành phần ( {isVisible && <SomeComponent />}).

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}
11
snyh 2017-10-22 19:04.

Nếu bạn sử dụng ECMAScript 6, bạn có thể viết đơn giản như thế này.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />
8
Michael Parker 2015-07-02 04:18.

Điều này sẽ hoạt động, vì trạng thái của bạn sẽ thay đổi sau cuộc gọi Ajax và thành phần mẹ sẽ hiển thị lại.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}
3
Juraj 2018-01-19 08:45.

Trong React, bạn có thể hiển thị các Thành phần một cách có điều kiện, cũng như các thuộc tính của chúng, như props, className, id và hơn thế nữa.

Trong React, bạn nên sử dụng toán tử bậc ba có thể giúp bạn hiển thị các Thành phần một cách có điều kiện.

Một ví dụ cũng chỉ ra cách hiển thị có điều kiện Thành phần và thuộc tính kiểu của nó.

Đây là một ví dụ đơn giản:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, 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>

1
Jonas Sciangula Street 2020-08-13 05:30.

Ví dụ: sử dụng kiểu thuộc tính cho vùng chứa tùy chỉnh

const DriverSelector = props => {
  const Container = props.container;
  const otherProps = {
    ...( props.containerStyles && { style: props.containerStyles } )
  };

  return (
    <Container {...otherProps} >
0
Viktor Kireev 2015-07-02 04:24.

Xem xét bài viết JSX In Depth , bạn có thể giải quyết vấn đề của mình theo cách này:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);
0
lifeisfoo 2020-11-23 13:37.

Theo quan điểm của tôi, cách tốt nhất để quản lý nhiều đạo cụ có điều kiện là cách tiếp cận đối tượng đạo cụ từ @brigand. Nhưng nó có thể được cải thiện để tránh thêm một ifkhối cho mỗi chỗ dựa có điều kiện.

Trình trợ giúp ifVal

đổi tên nó theo ý bạn (iv, condVal, cv, _, ...)

Bạn có thể xác định một hàm trợ giúp để trả về một giá trị hoặc một giá trị khác, nếu một điều kiện được đáp ứng:

// components-helpers.js
export const ifVal = (cond, trueValue=true, falseValue=null) => {
  return cond ? trueValue : falseValue
}

Nếu condtrue(hoặc đúng ), giá trị trueValueđược trả về - hoặc true. Nếu condfalse(hoặc falsy ) thì falseValueđược trả lại - hay null.

Các giá trị mặc định này ( truenull), thường là các giá trị phù hợp để cho phép một phần mềm hỗ trợ được truyền hoặc không cho một thành phần React. Bạn có thể coi hàm này như một "toán tử bậc ba của React được cải tiến". Hãy cải thiện nó nếu bạn cần kiểm soát nhiều hơn các giá trị được trả về.

Hãy sử dụng nó với nhiều đạo cụ.

Xây dựng đối tượng đạo cụ (phức tạp)

// your-code.js
import { ifVal } from './components-helpers.js'

// BE SURE to replace all true/false with a real condition in you code
// this is just an example

const inputProps = {
  value: 'foo',
  enabled: ifVal(true), // true
  noProp: ifVal(false), // null - ignored by React
  aProp: ifVal(true, 'my value'), // 'my value'
  bProp: ifVal(false, 'the true text', 'the false text') // 'my false value',
  onAction: ifVal(isGuest, handleGuest, handleUser) // it depends on isGuest value
};

 <MyComponent {...inputProps} />

Cách tiếp cận này tương tự như cách phổ biến để quản lý có điều kiện các lớp bằng cách sử dụng tiện ích tên lớp , nhưng được điều chỉnh cho phù hợp với đạo cụ.

Tại sao bạn nên sử dụng phương pháp này

Bạn sẽ có một cú pháp rõ ràng và dễ đọc, ngay cả với nhiều đạo cụ có điều kiện: mỗi phần mềm hỗ trợ mới chỉ cần thêm một dòng mã bên trong khai báo đối tượng.

Bằng cách này bạn thay thế tiếng ồn cú pháp của các nhà khai thác lặp đi lặp lại ( ..., &&, ? :, ...), có thể là rất khó chịu khi bạn có nhiều đạo cụ, với một cuộc gọi chức năng đơn giản.

Ưu tiên hàng đầu của chúng tôi, với tư cách là nhà phát triển, là viết mã rõ ràng nhất để giải quyết vấn đề. Đã quá nhiều lần chúng ta giải quyết vấn đề cho cái tôi của mình , làm tăng thêm sự phức tạp khi nó không được yêu cầu. Mã của chúng ta phải đơn giản, cho chúng ta hôm nay, cho chúng ta ngày mai và cho bạn bè của chúng ta.

chỉ vì chúng ta có thể làm điều gì đó không có nghĩa là chúng ta nên

Tôi hy vọng trả lời muộn này sẽ giúp ích.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Trong Saturday Night Live, The Bachelor is Bland và Tina Fey trở lại với vai 'Crazy' Sarah Palin

Sau khi Sarah Palin tán thành Donald Trump vào đầu tuần này, gần như không thể tránh khỏi việc Tina Fey sẽ trở lại Saturday Night Live để thăm lại ấn tượng Palin cổ điển của cô. Và Fey chắc chắn đã không làm thất vọng, cô ấy đã đưa ra một lời khen ngợi không hề nhẹ về bài phát biểu chứng thực Iowa quanh co và khó hiểu của Palin trong khi Trump của Darrell Hammond đưa ra bình luận xuyên suốt.

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Đây có phải là sự khởi đầu cho sự kết thúc của việc giam giữ Brittney Griner?

Brittney Griner (r.) Ngay từ đầu, thân phận của Brittney Griner đã là tình huống con tin Mỹ độc nhất trong lịch sử hiện đại.

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Tom Brady là bộ tứ vệ đầu tiên cuối cùng có thể giúp Julio Jones có hơn 10 lần chạm bóng trong một mùa giải

Chúng ta có thể thấy nhiều hơn nữa về một Julio Jones khỏe mạnh trong khu vực cuối năm nay. John Parker Wilson, Greg McElroy, A.

Đó phải là Đức

Đó phải là Đức

Đối với đội tuyển Anh, không có kẻ thủ ác nào lớn hơn Hầu hết các cổ động viên Anh, nếu không muốn nói là tất cả, hẳn sẽ phải gật gù khi tiếng còi mãn cuộc của trận bán kết lượt về W Euro 2022 vang lên. Bởi vì nó báo hiệu rằng Đức sẽ chờ đợi ở Wembley trong trận chung kết với Anh và là điều duy nhất giữa Anh và chiếc cúp lớn đầu tiên của đội tuyển nữ.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language