javascript - 如何在一个 React 组件中输入数据并使其在另一个 React 组件中渲染？

Question

我正在使用 JSX 和 ES6 学习 React，并且对如何使用 ReactRouter4 创建组件和路由到不同 View 有了相当不错的掌握。

我仍然无法弄清楚的是，例如，我如何创建一个管理页面，在其中输入我的作品集的作品详细信息，并将所有作品呈现在另一个页面(大概是作品集页面)上。

这就是我所得到的。

App.js 加载 Portfolio.js 组件

import React from 'react';

import Navigation from './Navigation';
import Title from './Title';
import Portfolio from './Portfolio';

class App extends React.Component {
  render() {
    return(
      <div className="container-fluid">
        <div className="container">
          <div className="row">
            <div className="col-sm-12">
              <Navigation />
              <Title title="kuality.io"/>
              <section className="app">
                <Portfolio works={this.props.works} />
              </section>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default App;

Portfolio.js 组件有一个构造函数来绑定(bind)名为 addWork() 的唯一方法、React 方法 componentWillMount() 和 componentWillUnmount() 来处理状态，以及默认的 render()。关于此组件还需要提及的一件事是，它正在调用一个名为 ../base 的组件，该组件包含通过 Firebase 在线数据库的所有详细信息。因此，如果这与它所在的位置相关，那么请考虑到这一点，否则不要担心。

import React from 'react';

import Work from './Work';
import Admin from './Admin';
import base from '../base';

class Portfolio extends React.Component {
  constructor() {
    super();

    this.addWork = this.addWork.bind(this);

    // getInitialState
    this.state = {
      works: {}
    };
  }
  componentWillMount() {
    this.ref = base.syncState(`/works`
      , {
        context: this,
        state: 'works'
      })
  }
  componentWillUnmount() {
    base.removeBinding(this.ref);
  }
  addWork(work) {
    // update our state
    const works = {...this.state.works};
    // add in our new works with a timestamp in seconds since Jan 1st 1970
    const timestamp = Date.now();
    works[`work-${timestamp}`] = work;
    // set state
    this.setState({ works });
  }
  render() {
    return(
      <div>
        <section className="portfolio">
          <h3>Portfolio</h3>
          <ul className="list-of-work">
            {
              Object
              .keys(this.state.works)
              .map(key => <Work key={key} details={this.state.works[key]}/>)
            }
          </ul>
        </section>
      </div>
    )
  }
}

export default Portfolio;

在Object内部，我通过Work组件进行映射，该组件只是我为其创建了另一个组件的列表项，与问题并不真正相关.

最后，我有了 Admin.js 和 AddWorkForm.js 组件。我抽象了 AddWorkForm.js ，以便我可以在需要时在其他地方使用它，这基本上是 React Components 背后的主要思想，所以这就是我选择这样做的原因。

import React from 'react';

import Title from './Title';
import AddWorkForm from './AddWorkForm';

class Admin extends React.Component {
  constructor() {
    super();

    this.addWork = this.addWork.bind(this);

    // getInitialState
    this.state = {
      works: {}
    };
  }

  addWork(work) {
    // update our state
    const works = {...this.state.works};
    // add in our new works with a timestamp in seconds since Jan 1st 1970
    const timestamp = Date.now();
    works[`work-${timestamp}`] = work;
    // set state
    this.setState({ works });
  }
  render() {
    return(
      <div className="container-fluid">
        <div className="container">
          <div className="row">
            <div className="col-sm-12">
              <Title title="Admin"/>
              <section className="admin">
                <AddWorkForm addWork={this.addWork} />
              </section>
            </div>
          </div>
        </div>
      </div>

    )
  }
}

export default Admin;

和 AddWorkForm.js 组件，它基本上是 onSubmit 创建、对象并重置表单的表单

import React from 'react';

class AddWorkForm extends React.Component {
  createWork(event) {
    event.preventDefault();
    console.log('Creating some work');
    const work = {
      name: this.name.value,
      desc: this.desc.value,
      image: this.image.value
    }
    this.props.addWork(work);
    this.workForm.reset();
  }

  render() {
    return(
      <form ref={(input) => this.workForm = input} className="work-edit form-group" onSubmit={(e) => this.createWork(e)}>
        <input ref={(input) => this.name = input} type="text" className="form-control" placeholder="Work Title"/>
        <textarea ref={(input) => this.desc = input} type="text" className="form-control" placeholder="Work Description"></textarea>
        <input ref={(input) => this.image = input} type="text" className="form-control" placeholder="Work Image"/>
        <button type="submit" className="btn btn-primary">+Add Work</button>
      </form>
    )
  }
}

export default AddWorkForm;

这是包含我使用 ReactRouter 的文件:

import React from 'react';
import { render } from 'react-dom';
// To render one method from a package user curly brackets, you would have to know what method you wan though
import { BrowserRouter, Match, Miss} from 'react-router';

import './css/normalize.css';
import './css/bootstrap.css';
import './css/style.css';

// import '../js/bootstrap.js';

import App from './components/App';
import WorkItem from './components/WorkItem';
import Capability from './components/Capability';
import Connect from './components/Connect';
import NotFound from './components/NotFound';
import Admin from './components/Admin';

const Root  = ()=> {
  return(
    <BrowserRouter>
      <div>
        <Match exactly pattern="/" component={App} />
        <Match pattern="/work/:workId" component={WorkItem} />
        <Match exactly pattern="/capability" component={Capability} />
        <Match exactly pattern="/connect" component={Connect} />
        <Match exactly pattern="/admin" component={Admin} />
        <Miss component={NotFound} />
      </div>
    </BrowserRouter>
  )
}

render (<Root />, document.querySelector('#main'));

所以这是我尝试过但未能完成的，它可能是某种我无法定义的 this.props 解决方案，我需要创建 在 Admin.js 组件中工作，该组件创建对象，然后将该对象扔给 Portfolio.js 组件，以便它可以通过 渲染它>Work.js 组件，它不会将对象添加到数据库中。

当我将所有组件放在同一页面上时，这才有效，这并不理想，因为任何访问我的作品集的人都可以添加作品。当然，我可以开始学习身份验证以及如何根据用户凭据使该组件出现或消失，但我更愿意学习能够将我的管理页面放在单独的 View 上的非常有值(value)的技能，因为我看到另一个学习这样做的应用程序。

很想听听其他人对此的看法，以及他们在哪里可以确定我在这里失败了。

顺便说一句，我意识到我还有其他组件，例如 Nav.js 和 Title.js，但它们对于说明示例来说并不是必需的。

谢谢。

Answer 1

你可以将组件作为 props 传递，当使用 React Router 时，你可以有 named components .

对于 sibling 之间的数据共享，最好将数据放在父组件上，尽管您可以使用上下文，但是这个 is not advised并且在未来版本中可能无法访问。

如果您需要在另一个组件上创建某些内容(不知道为什么)，您可以传递一个可以渲染它的函数。