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

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

Tôi phải thêm các thuộc tính bắt buộc và readOnly để tạo thành các 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ể thấy cách giải quyết điều này vì readOnly = "false" không giống như bỏ 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: Định danh không mong đợi).

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" : ""} />
        );
    }
});

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

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var 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 có ai tò mò về cách thức / lý do tại sao điều này xảy ra, bạn có thể tìm thấy chi tiết trong mã nguồn của ReactDOM, đặc biệt tại các dòng 30 và 167 của tệp DOMProperty.js .

Câu trả lời của juandemarco thường đúng, nhưng đây là một lựa chọn khác.

Xây dựng một đối tượng như thế nào bạn thích:

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

if (condition)
  inputProps.disabled = true;

Kết xuất với lây lan, tùy ý chuyển các đạo cụ khác cũng có.

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

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 {bsStyle: 'success'}hoặc {}sẽ được trả lại. Toán tử lây lan sau đó sẽ trải các thuộc tính của đối tượng được trả về Buttonthành phần. Trong trường hợp giả, 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 truyền cho thành phần.

Một cách khác dựa trên nhận xét của Andy Polhill :

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 bsStylecó giá trị là undefined.

Đây là một 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 } ) } />
);

Đâ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, bởi 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.

Nếu không có điều kiện :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

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

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

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

{...this.props.isTrue && {style : {color: 'red'}}}

Nếu bạn sử dụng ECMAScript 6, bạn có thể chỉ cần viết như thế này.

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

Điều này sẽ hoạt động, vì trạng thái của bạn sẽ thay đổi sau lệnh gọi Ajax và thành phần cha mẹ sẽ kết xuất lại.

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

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

Trong React, cách tốt nhất là sử dụng toán tử ternary 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 cho thấy 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>

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