在 React 中将对象传递给组件

Question

我对生活中的反应方面还很陌生，我的语法遇到了一个稍微烦人的问题，我可以在一些帮助下解决这个问题。

前提很简单：

我正在尝试将对象作为道具传递给组件。

父元素：-- 尝试将状态传递给总计组件

class Dash_overview extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            companies: {
                title: 'companies on record',
                value: null,
                messurement: 'Companies'
            },
            earning: {
                title: 'total earning',
                value: null,
                messurement: 'mill'
            }
        }
    }
    render(){
        return (
            <div className="overview-container">
                <div className="totals">
                    <Totals values={this.state.companies}/>
                    <Totals values={this.state.earning}/>
                </div>
            </div>
        )
    }
}

子组件 -- 将使用传递给它的值

class Totals extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            
        }
    }
    render(){
        return (
            <div className="totals_comp">
                <h3>{companies.title}</h3>
                <h3>{companies.value}</h3>
                <h3>{companies.messurement}</h3>
            </div>
        )
    }
}

--

我可能犯了一个愚蠢的错误，但我已经尝试了几个不同的变体，但都没有成功，所以非常重视有人指出我哪里出错了。 :)

提前致谢，沃利

Answer 1

您可以将状态值散布到子组件道具中，对象键将是组件内使用的道具名称。

<Totals {...this.state.companies}/>
<Totals {...this.state.earning}/>

或显式传递道具值

const { messurement, title, value } = this.state.companies;

...

<Totals
  messurement={messurement}
  title={title}
  value={value}
/>
<Totals
  messurement={messurement}
  title={title}
  value={value}
/>

然后在child中通过props访问

<div className="totals_comp">
  <h3>{this.props.title}</h3>
  <h3>{this.props.value}</h3>
  <h3>{this.props.messurement}</h3>
</div>

问题

values={this.state.companies} 获取状态对象值并将其分配给名为 values 的道具，但随后在子组件中您根本不引用它。即像 props.values.title.

Answer 2

试试这个。

const { title,value,messurement }  = this.props.values;
    
    render(){
        return (
            <div className="totals_comp">
                <h3>{title}</h3>
                <h3>{value}</h3>
                <h3>{messurement}</h3>
            </div>
        )
    }

Answer 3

由于您将 {title: 'companies on record',value: null,messurement: 'Companies'} 作为 values 属性传递，因此您应该使用其他组件的值。如果您想使用公司名称，请执行以下操作：

<div className="overview-container">
        <div className="totals">
            <Totals companies={this.state.companies}/>
            <Totals companies={this.state.earning}/>
        </div>
    </div>

然后在总计组件上执行此操作：

const {companies}=this.props
render(){
  return (
    <div className="totals_comp">
        <h3>{companies.title}</h3>
        <h3>{companies.value}</h3>
        <h3>{companies.messurement}</h3>
    </div>
 )}

在 React 中将对象传递给组件

Passing Objects to Component in React

javascript

reactjs

react-component

问题