Question

我是React的新手，我有一个关于将属性从一个组件共享到另一个组件的问题。例如，我想要一个具有“可见”功能的父组件，我可以将其传递给其他子组件。

示例：

CustomInput visible="true";
CustomDropDown visible="false"

我想知道最好的方法，尊重良好做法。谢谢你的帮助！

Answer 1

真的很简单。您可以将方法作为道具传递。假设您有父级或高阶组件（HOC），您可以执行以下操作：

class Parent extends React.Component {
  logWord = (word) => {
    console.log(word);
  }

  render () {
    return <ChildComponent handleLogging={ this.logWord } />
  }
}

然后，在ChildComponent中，您只需从props访问该方法。例如：

class ChildComponent extends React.Component {
  render () {
    return (
      <div onClick={ this.props.handleLog.bind(null, 'Logged!') }>Click me to log a word!</div>
    }
  }
}

因此，在您的示例中，如果您想要在您的状态上更新了可见性属性的父级上存在的方法，您可以写：

class Parent extends React.Component {
    constructor () {
        this.state = {
            visible: false
        }
    }

    setVisible = (bool) => {
        this.setState({ visible: bool });
    }

    render () {
        return <ChildComponent updateVisible={ this.setVisible } visible={ this.state.visible } />;
    }
}

ChildComponent：

class ChildComponent extends React.Component {
  render () {
    return (
      <div>
        <div onClick={ this.props.updateVisible.bind(null, true) }>Set me to visible!</div>
        <div onClick={ this.props.updateVisible.bind(null, false) }>Set me to invisible!</div>
          { this.props.visible && <div>I'm visible right now!</div> }
      </div>
    }
  }
}

如何与React组件共享属性？

1 个答案: