如何创建共享功能但具有独立状态的反应组件？

Question

I want to create two React component. They need to share common functions. These functions uses this.setState() , so I could not put them inside a helper file. I tried using composition . This enable me to share functions but they also share state.

I need something like

//file 1
var Component1 = React.createClass({
    getInitialState() {
        return {
            //return some common + new states
        }
});

//file 2
var Component2 = React.createClass({
    getInitialState() {
        return {
            //return some common + new states
        }
});

// file 3
// This file needs to have some functions, which can do:
this.setState(); //on state of Component1 and Component2.

Answer 1

You have a couple options here.

A store

If these components are completely independent, you can use a store to keep and update the data that each component uses, and subscribe to the store. This is the Flux/Redux pattern.

A component might look like this

class Component1 extends React.Component {
  constructor(...props) {
    super(...props)
    this.update = this.update.bind(this)
    this.state = { count: 0 }
  }

  update (storeData) {
    this.setState(storeData)
  }

  componentDidMount () {
    store.subscribe(this.update)
  }

  componentDidUnmount () {
    store.unsubscribe(this.update)
  }

  render () {
    return (<span>You have clicked {this.state.count} times</span>)
  }
}

The thing to note here is that the store doesn't have direct access to the component's state. The component subscribes, and some other mechanism will publish data. The store will call the registered callback will this happens. A very simple store might look like this

const store = {
  subscriptions: new Set(),
  data: {},
  subscribe: function (callback) {
    this.subscriptions.add(callback)
  },
  unsubscribe: function (callback) {
    this.subscriptions.delete(callback)
  },
  update: function (key, value) {
    this.data[key] = value
    this.subscriptions.forEach(cb => cb(this.data))
  }
}

This allows anyone with access to the store to update any/all components that are subscribed to it.

const CounterButton = () => (
  <button onClick={() => store.update('count', (store.data.count || 0) + 1)}>Increase Count</button>
)

Here is a very contrived codepen demonstrating this

Parent Component

If your components are both children of a shared component, then their parent can update them by updating their props , instead of updating their state. It can keep track of this using its own, internal state.

class ParentComponent extends React.Component {
  constructor(...props) {
    super(...props)
    this.state = { clicks: 0 }
  }

  render () {
    return (
      <div>
        <button onClick={() => this.setState({ clicks: this.state.clicks + 1})}>Increase Count</button>
        <Component1 clicks={this.state.clicks} />
        <Component2 clicks={this.state.clicks} />
      </div>
    )
  }
}
const Component1 = ({clicks}) => (
  <span>You have clicked {clicks} times</span>
)

const Component2 = (props) => (
  <span>You have pressed {props.clicks} times</span>
)

Here is an equally contrived codepen demonstrating this

Something insane else

The above two are the recommended way to go. But this is JavaScript, and we have less rules than the Wild West. If you really want to directly control the state of components from some shared function, there is nothing stopping you .

var sharedComponents = new Set()

function incrementComponents () {
  sharedComponents.forEach(c => c.setState({clicks: c.state.clicks + 1}))
}

class Component1 extends React.Component {
  constructor(...props) {
    super(...props)
    this.state = { clicks: 0 }
    sharedComponents.add(this)
  }

  render () {
    return (<span>You have clicked {this.state.clicks} times</span>)
  }
}

setInterval(incrementComponents, 1000)

Here is a completely insane codepen demonstrating this.

Answer 2

Keeping the both Component1 & Component2 under a Parent component , and if you pass the parent component function to the child component then both Component1 & Component2 will have the Parent Component functions as a props . so you get your common function like this way as react component works in a parent-child relationship . children's can get the data from their parent. and this way all your child component have their own state too.