如何有条件地向 React 组件添加属性？

我们可以通过以下方法有条件地向 React 组件添加属性：

方法一：

显然，对于某些属性，React 足够聪明，可以在传递给它的值不真实时忽略该属性。例如：

state= {
  disabled: false,
  required: true
}

return (
   
);

上述语法将导致以下输出：

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：它将如下所示。

方法2：我们可以使用以下语法：

state {
   condition: true
}

return (
 
);

根据条件的值，将返回 {className: 'btn btn-primary'} 或 {}。然后，Spread Operator 会将返回的对象属性传播到 Button 组件。在 falsy 情况下，因为返回的对象没有属性，所以不会向组件传递任何内容。

方法一：

Javascript

import React, { Component } from "react";
class App extends Component {
  
  state = {
    disabled: true,
    text: "Make it Unable"
  }
    
  updateState = () => {
    let text = !this.state.disabled ? "Make it Unable" : "Make it Disable";
    this.setState({ disabled: !this.state.disabled, text: text })
  }
  
  render() {
    return (
      

        
        
          {this.state.text}
        
      
    );
  }
}
  
export default App;

输出：

方法二：

Javascript

import React, { Component } from "react";
class App extends Component {
  
  state = {
    condition: true
  
  }
    
  updateState = () => {
    this.setState({ condition: !this.state.condition })
  }
  render() {
    return (
      

        
          click
            
      
    );
  }
}
  
export default App;

输出：