如何与 React 组件共享属性？

Question

我是 React 的新手，我对从一个组件到另一个组件共享属性有疑问。例如，我想要一个具有 "visible" 函数的父组件，我可以将其传递给其他子组件。

示例：

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 } />;
    }
}

子组件：

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 组件共享属性？

How to share a property with React components?

frontend

web

reactjs

如何与 React 组件共享 属性？

How to share a property with React components?

frontend

web

reactjs

如何与 React 组件共享属性？