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

将数据存储在父组件中，并将其作为道具发送给孩子。如果必须在其中之一中进行更改，则发送（也可以作为prop）该函数，该函数将更改父组件中的数据。

代码示例：

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>
);

如有需要，请随时澄清。

快乐的编码，

React中组件之间的数据传输

5 个答案: