Question

我正在使用ReactJS构建KanBan应用程序，并且试图将状态从父组件传递到父子树中最远的组件。我的主要App组件中有一个Column组件，在此Column组件中还有另一个名为“ Card”的组件。我想传递在App组件状态下添加/更新的数据，并成功在Card组件中显示它。到目前为止，Card组件是Column组件的子组件。

我尝试使用this.props这样做，但这只能向下一级-使用column组件。我考虑过要声明一个变量并将其等同于this.props.details.cards，然后将其设置为列组件的新状态，以便我可以再次将其作为props传递给card组件，但是我认为这不是最好的练习。

这是我的应用程序组件：

class App extends Component {
    constructor(props) {
      super(props)
      this.state = {
        columns: [
          {
            name: 'Todos',
            cards: []
          },
          {
            name: 'Onprogress',
            cards: []
          },
          {
            name: 'Done',
            cards: []
          }, 
        ] 
      };
    }; 

    addCard = card => {
      console.log("Adding a Card");
      const cards = { ...this.state.columns.cards };
      const keyDate = `card${Date.now()}`

      cards[keyDate] = card;

      this.setState({
        columns: [
          { 
            name: 'Todos',
            cards: cards
          }
        ] 
      });
    };
    
  render() {
    return (
    <div className="App">
   {Object.keys(this.state.columns).map(key => (
      <Column key={key} details={this.state.columns[key]} />
    ))}
    <AddCardForm addCard={this.addCard} />
    </div>
    );
  }
}
export default App;

这是我的列组件：

import React, {Component} from "react";
import Card from "./Card"


class Column extends Component {
    render() {
        return (
        <div className="column"> 
            <h1 className="Title">{this.props.details.name}</h1>
                <Card />
        </div>
        );
    }
}

export default Column;

这是我的卡组件：

import React, {Component} from "react";

class Card extends Component {
    render() {
        return (
        <div className="card">
            <span className="title">I'm a Card!</span>
        </div>  
        );
    }
}

export default Card;

Answer 1

React将仅获得注入到子组件中的属性。考虑到我们有三个组成部分B.test，A.test和$i5 = Ambito_tre::where('etichetta', 'like', '5%')->get();。

如果我们想在A在中间时将道具从B传递到C，我们可以这样做：

A组件返回C组件并按如下方式传递B：

A

现在，在B组件中，我们可以通过调用someProperty来访问该属性，但是，如果需要，在return <B someProperty={someValue} />组件中将无法使用该属性，我们执行以下操作。

B

我们在组件this.props.someProperty中所做的是传递来自组件C的{{1}}，我们可以在return <C someProperty={this.props.someProperty} />中以B的身份访问它，我们将其传递再次以相同的方式访问组件someProperty。

详细了解此内容：Passing props between react component

完整示例如下：

组件A：

组件B：

组件C：例如在render方法中访问属性this.props.someProperty

将状态传递给另一个子组件的子组件

1 个答案: