0

我在 ReactJS 中有一个项目，因为我有 3 种不同的视图来显示数据。为此，我有 3 个不同的组件。

我有一个父组件，其中有一个名为 Rotate 的按钮和三个选项，两个更改视图。

我的要求是我需要根据视图类型设置旋转按钮的可见性，例如 ViewType1 旋转按钮应该是可见的，而对于其他类型的视图，旋转按钮应该是隐藏的。

下面是我的代码：

父组件

class ParentView extends Component {
  constructor(props) {
    super(props);

    this.state = {
       isViewType1: true
    };
    this.setRotateButtonVisibility = this.setRotateButtonVisibility.bind(this);
}
setRotateButtonVisibility(isType1) {
   this.setState({isViewType1 : isType1});
}
render() {
   return(
     {this.state.isViewType1 && (
        <button id="btnRotate" className="btn btn-default">Rotate</button>)
     }
   <Switch>
          <Route
            exact
            path="/project/:projectID"
            render={() => (
            <Viewtype1/>
            )}
          />

          <Route
            exact
            path="/project/:projectID/ukeyview"
            render={() => (
              <Viewtype2/>
            )}
          />
          <Route
            exact
            path="/project/:projectID/proxystructureview"
            render={() => (
              <Viewtype3/>
            )}
          />

     </Switch>
 )}

那么，如何根据视图类型调用 setRotateButtonVisibility() 函数呢？

或者

如何根据视图类型设置状态？

我已经尝试过子组件的 callBackFunc 但它不允许更改状态。

我也尝试过以下代码：

<Route 
   exact
   path="/project/:view
   {...this.setRotateButtonVisibility(false)}
   render={() => (
     <Viewtype3/>
   )}
/>

但没有任何工作正常。

4

1 回答 1

0

您可以render()在Route.

<Route 
   exact
   path="/project/:projectId
   render={() => (
     <Viewtype1 setRotateButtonVisibility={(isType1) => this.setRotateButtonVisibility(isType1)} />
   )}
 />

这意味着可以使用 props 在子 react 组件内部访问该方法：this.props.setRotateVisibility(false)

您需要将组件名称的定义大写。所以Viewtype1不要使用viewtype1，否则 React 会认为它是一个 HTML 标签而不是一个组件。请参阅这篇文章：ReactJS 组件名称必须以大写字母开头？

于 2018-05-14T20:14:58.533 回答