Reactjs，将数据从子级传递到父级

Question

我仍然是ReactJ的初学者，我需要一些帮助。我有一个带有显示链接选项的简单文件上载组件。我目前正在寻找一种解决方案，以将链接从孩子传递到父母。从文件上载程序组件到表组件指定。

这是我的上传器组件：

  state = {
    image: '',
    imageURL: '',
    progress: 0
  }


  handleUploadStart = () => {

    this.setState({
      progress: 0
    })
  }

  handleUploadSuccess = filename => {
    this.setState({
      image: filename,
      progress: 100
    })

    firebase.storage().ref('avatars').child(filename).getDownloadURL()
      .then(url => this.setState({
        imageURL: url
      }))
  }



  render() {
    return (
      <div className="App">

        <FileUploader
          accept="image/*"
          name='image'
          storageRef={firebase.storage().ref('avatars')}
          onUploadStart={this.handleUploadStart}
          onUploadSuccess={this.handleUploadSuccess}
        />

<div>
{this.state.imageURL}  <br/>
<a href={this.state.imageURL}>Link</a>
</div>

      </div>
    );
  };
}
export default FilesUploader;

和表组件

    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Title</Table.HeaderCell>
        <Table.HeaderCell>File</Table.HeaderCell>

      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
        <Table.Cell>Title</Table.Cell>
        <Table.Cell>File</Table.Cell>
      </Table.Row>

我想在名为“文件”的单元格中显示链接，但是我不确定该怎么做。有人可以帮我吗？

Answer 1

您可以执行类似的操作，将功能从父级传递给孩子，并使用新的链接从孩子中调用该函数并更新父级的状态。

const Parent = () => {
const [links, setLinks] = useState('');

const updateLink = (newLink) => {
    setLinks(newLink);
}

return (
    <div> 
        <Table>
          <Table.Row>
             <Table.HeaderCell>Title</Table.HeaderCell>
             <Table.HeaderCell>{link}</Table.HeaderCell>
            </Table.Row>
        </Table>
       <FileUploader updateLink={updateLink}  /> 
    </div>
)
}
enter code here

const FileUploader = ({updateLink}) => {
    onUploadSuccess = () => {
        // do api prcession if any
        updateLink('pass link here')
    }

    return (
        <div>
            // some code releated file FileUploader
        </div>
    )
}