React 中组件之间的数据传输

Question

我对如何将数据从一个组件传输到另一个组件做出反应并苦苦挣扎。

我参考了一些教程和博客，但对我不起作用。

我有两个子组件，Body-content.jsx 和 Profile.jsx 和 1 个父组件 parent.jsx

我想将一些数据从Body-content.jsx 传输到Profile.jsx。

这是我的代码

Body-content.jsx

class BodyContent extends React.Component {
    componentDidMount() {
        this.getUserList()
    }
    getUserList(){
      fetch('https://jsonplaceholder.typicode.com/users')
        .then(result => {
            return result.json();
        }).then(data =>{
           this.setState({
             users : data
           })
        })
    }

      render() {
        const user = this.state.users.map((userData, i) => (          
          <CardBody>
              ...some code here
              <Button color='primary' onClick={e => this.viewProfile(userData)}>View Profile</Button>
          </CardBody>
        </Card>
        ));
          return (
            <>
       <div>{user}</div>
            </>
          )
      }

      viewProfile = function (data) {
      }
  }
  export default BodyContent;

profile.jsx

class Profile extends React.Component {
  componentDidMount() {
  }
  render() {

    return (
      <>
        <TopNav />
        <main className="profile-page" ref="main">
                    <section>
                       //code goes here
                    </section>
        </main>
      </>
    );
  }
}

export default Profile;

Answer 1

将您的数据存储在父组件中，并将其作为道具发送给子组件。 如果您必须在其中一个中更改它，则发送（也作为道具）该函数，该函数将更改父组件中的数据。

代码示例：

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {someData: ''};
  } 

  changeData(newData) {
    this.setState({
      someData: newData
    });
  }

  render() {
    return (
      <>
        <Child1 setData={this.changeData} data={this.state.someData} />
        <Child2 setData={this.changeData} data={this.state.someData} />
      </>
    )
  }
}

他们都可以使用this.props.setData('newData')更改父组件中的数据

Answer 2

如果您想在子组件之间共享您的状态，那么您可能需要将该属性移动到您可以在两个子组件之间共享的父状态中。

• 兄弟姐妹
  • 父组件
• 任何到任何
  • 观察者模式
  • 全局变量
  • 上下文

How to make a shared state between two react components?

Answer 3

您可以将状态提升到父组件：

class Parent extends Component {
  state = {
    users
  };

  handleUsersChange = users => this.setState({ users });

  render() {
    const { users } = this.state;

    return (
      <React.Fragment>
        <Body-content onUsersChange={ this.handleUsersChange } />
        <Profile users={ users } />
      </React.Fragment>
    );
  }
}

...

class BodyContent extends React.Component {
    getUserList(){
      fetch('https://jsonplaceholder.typicode.com/users')
        .then(result => {
            return result.json();
        }).then(data =>{
           this.props.handleUsersChange(data);
        })
    }
  }

Answer 4

在 ReactJs 中，数据流是单向的——从上到下。父母将数据传递给各自的孩子。

在这里，因为您想在两个兄弟姐妹之间共享数据。数据应该首先提供给他们的父母。

为此，您的getUserList api 调用应该在您的父级内部，即 你的parent.jsx 组件。

您可以从那里将数据作为道具传递给两个兄弟姐妹。

如果您需要并对此进行进一步解释，请告诉我。如果需要，请分享您的parent.jsx 代码。我可以进一步帮助你。

Answer 5

您好，欢迎来到 React 的世界，

如果您想在兄弟组件之间共享数据，您应该始终牢记，您应该将数据存储在最高公共组件 (doc)。

在您的情况下，这意味着拥有一个父组件来保存您的用户列表和当前配置文件的状态，然后相应地呈现您的列表和当前配置文件。

一个让你走上“正确轨道”的小例子sandbox：

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      users: [],
      currentIndex: null
    }
  } 

  componentDidMount() {
      this.getUserList()
  }

  getUserList(){
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(result => result.json())
      .then(data => {
         this.setState(() => ({
           users : data
         }))
      });
    }

  updateCurrent = (index) => {
    this.setState(() => ({ currentIndex: index }));
  } 

  render() {
    return (
      <div>
        <UserList 
          users={this.state.users}
          updateCurrent={this.updateCurrent}
        />

        {this.state.currentIndex !== null && (
          <Profile user={this.state.users[this.state.currentIndex]} />
         )}
      </div>
    )
  }
}

const UserList = (props) => (
  <div>
    {props.users.map((user, i) => (          
      <div key={user.id}>
         <button color='primary' onClick={() => props.updateCurrent(i)}>View Profile</button>
      </div>
    ))}
  </div>
);

const Profile = ({ user }) => (
  <div className="profile-page">
    {user.name}     
  </div>
);

如有需要，请随时要求澄清。

编码愉快，