React传递props时能否使用条件渲染写法？ESLint报错如何解决

写法存在的核心问题 #

• 给ComponentA传值时未指定props名称，仅传入表达式的写法不符合React props传递规范，这是ESLint标红的直接原因
• ComponentA内的style属性写法冗余，外层已经绑定style属性，内部不需要额外嵌套style字段
• 存在多处语法问题：ComponentB的constructor调用super未传props、import语句末尾多余逗号、constructor未正常闭合、handleSubmit方法定义位置错误

正确实现方案 #

你的核心需求是根据ComponentB的load状态控制ComponentA的按钮样式，有两种常用实现方式：

方案1：传递状态标识，样式逻辑放在ComponentA内部（更推荐，逻辑内聚） #

ComponentA代码：

// ComponentA
export default function ComponentA(props) {
  return (
    <div>
      <button style={props.isLoading ? props.loadingStyle : props.submitStyle}>
        {props.isLoading ? 'Loading' : 'Submit'}
      </button>
    </div>
  )
}

ComponentB代码：

// ComponentB
import React, { Component } from 'react'
import ComponentA from './A'

export default class ComponentB extends Component {
  constructor(props) {
    super(props)
    this.state = {
      load: false,
    }
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.setState({
      load: true,
    })
  }

  render () {
    // 可根据需求自定义样式规则
    const submitStyle = { backgroundColor: '#1677ff', color: '#fff', padding: '4px 12px' }
    const loadingStyle = { backgroundColor: '#999', color: '#fff', padding: '4px 12px' }
    return (
      <div>
        <button onClick={this.handleSubmit}>提交</button>
        {/* 明确指定传递的props名称 */}
        <ComponentA 
          isLoading={this.state.load}
          submitStyle={submitStyle}
          loadingStyle={loadingStyle}
        />
      </div>
    )
  }
}

方案2：直接传递最终样式到ComponentA #

如果需要保留ComponentA内两个按钮的原有结构，可以使用该方案：
ComponentA代码：

// ComponentA
export default function ComponentA(props) {
  return (
    <div>
      <button style={props.submitStyle}>Submit</button>
      <button style={props.loadingStyle}>Loading</button>
    </div>
  )
}

ComponentB内调用部分修改为：

<ComponentA 
  submitStyle={this.state.load ? {display: 'none'} : submitStyle}
  loadingStyle={this.state.load ? loadingStyle : {display: 'none'}}
/>

内容的提问来源于stack exchange，提问作者D.B.J