Question

我知道如何将数据从一个组件传递到另一个组件，但是我想做的是拥有两个独立的组件，其中一个组件将数据传递给另一个组件。

例如，<Component 1>将数据传递到<Component 2>。我不想在<Component 2>的代码内将数据传递到<Component 1>。我想知道是否有可能传递数据以及如何从<Component 1>传递到<Component 2>。因为，我希望有一个独立的组件来执行自己的任务，并在这些任务结束时，将数据传递给她自己的代码中未包含的其他组件。

这是我想做的一个例子：

class Test extends Component{
   constructor(){
       super()
   }

   render(){
      return(
         <div>
              <h1>Test</h1>
              <Component 1 />
              <Component 2 />
         </div>
      )
   }
}

因此，有什么方法可以在React.js中的独立组件之间传递数据吗？

Answer 1

const { useState, createContext, useContext } = React;
const Context = React.createContext();

const MyComponent = () => {
  const { name, updateName } = useContext(Context);
  return (<span onClick={() => updateName('Jane')}>{name}</span>);
};

const App = () => {
  const [name, updateName] = useState('John');
  return (
    <Context.Provider value={{ name, updateName }}>
      <MyComponent />
      <br/>
      <MyComponent />
    </Context.Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root" />

练习摘录... 单击“约翰”将名称更新为简

Answer 2

如果您需要独立组件的相关数据-您需要将状态提升到公共父组件。

对于您的特定示例，Test组件可能包含需要在Component1和Component2之间共享的数据以及更改它的处理程序。

您可以在有关Lifting State Up的官方文档中详细了解此内容。

Answer 3

您应该在同时包含两个组件的父组件中使用state，并使用某种方式通过子组件更新父状态并以其基本方式使用它。高级方法是使用Redux，但我认为您当前的示例不需要它。

让我给你看一个小例子。

const Component1 = props => (
  <div>
    <h1>Component 1</h1>
    <p>Please change the value here:</p>
    <input
      type="text"
      onChange={e => props.changeState(e.target.value)}
      value={props.value}
    />
  </div>
);
const Component2 = props => (
  <div>
    <h1>Component 2</h1>
    <p>Let me show the common value here:</p>
    <pre>{props.value}</pre>
  </div>
);

class App extends React.Component {
  state = {
    commonValue: "Hello"
  };
  changeState = val => {
    this.setState({
      commonValue: val
    });
  };
  render() {
    return (
      <div className="App">
        <Component1
          value={this.state.commonValue}
          changeState={this.changeState}
        />
        <Component2 value={this.state.commonValue} />
      </div>
    );
  }
}

这样，您将能够从两个不同的组件更改值。

工作摘要

const Component1 = props => (
  <div>
    <h1>Component 1</h1>
    <p>Please change the value here:</p>
    <input
      type="text"
      onChange={e => props.changeState(e.target.value)}
      value={props.value}
    />
  </div>
);
const Component2 = props => (
  <div>
    <h1>Component 2</h1>
    <p>Let me show the common value here:</p>
    <pre>{props.value}</pre>
  </div>
);

class App extends React.Component {
  state = {
    commonValue: "Hello"
  };
  changeState = val => {
    this.setState({
      commonValue: val
    });
  };
  render() {
    return (
      <div className="App">
        <Component1
          value={this.state.commonValue}
          changeState={this.changeState}
        />
        <Component2 value={this.state.commonValue} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

工作演示：https://codesandbox.io/s/priceless-sea-e7d99

React：如何在独立组件之间传递数据

3 个答案: