如何在一个反应组件传递到另一个反应组件，以穿透第一个组件的内容?

有没有办法将一个组件传递给另一个react组件?我想创建一个模型react组件，并传入另一个react组件，以透光该内容。

编辑:这里是一个reactJS代码，说明了我正在尝试做什么。http://codepen.io/aallbrig/pen/bEhjo

HTML

<div id="my-component">
    <p>Hi!</p>
</div>

反应

/**@jsx React.DOM*/

var BasicTransclusion = React.createClass({
  render: function() {
    // Below 'Added title' should be the child content of <p>Hi!</p>
    return (
      <div>
        <p> Added title </p>
        {this.props.children}
      </div>
    )
  }
});

React.renderComponent(BasicTransclusion(), document.getElementById('my-component'));

当前回答

你可以将你的react组件传递给另一个组件，并从child发出函数

import CustomerFilters;

parent:

const handleFilterChange = (value) => {
 console.log(value)
}

<DataGrid
   contentName="customer"
   fetchFilterComponents = {<CustomerFilters onSelectFilter={handleFilterChange} />}
</DataGrid>


child:
CustomerFilters
return (

        <select className="filters-dropdown" onChange={onSelectFilter}>
          <option>Select Filter</option>
          {customerFilterOptions?.map((filter: any) => {
            return <option value={filter.value}>{filter.name}</option>;
          })}
        </select>
)

2021-05-24 11:10:40

其他回答

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

2017-03-17 00:59:00

虽然有点晚了，但这里有一个强大的HOC模式，可以通过将组件作为道具来覆盖组件。它简单而优雅。

假设MyComponent呈现了一个虚构的a组件，但您希望允许自定义重写a，在本例中为B，它将a包装在<div>…</div>，并将“!”附加到文本道具:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

2019-03-27 15:49:45

你可以将你的react组件传递给另一个组件，并从child发出函数

import CustomerFilters;

parent:

const handleFilterChange = (value) => {
 console.log(value)
}

<DataGrid
   contentName="customer"
   fetchFilterComponents = {<CustomerFilters onSelectFilter={handleFilterChange} />}
</DataGrid>


child:
CustomerFilters
return (

        <select className="filters-dropdown" onChange={onSelectFilter}>
          <option>Select Filter</option>
          {customerFilterOptions?.map((filter: any) => {
            return <option value={filter.value}>{filter.name}</option>;
          })}
        </select>
)

2021-05-24 11:10:40

Facebook建议使用无状态组件来源:https://web.archive.org/web/20160608001717/http: / / facebook.github.io / / docs / reusable-components.html反应

在理想的情况下，大多数组件都是无状态的函数，因为在未来我们还会研究性能特定于这些组件的优化，避免不必要的检查和内存分配。这是推荐的模式可能的。

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

2016-06-23 04:27:28

注意，我在这里提供了一个更深入的答案

运行时包装:

这是最地道的方式。

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

注意，children是React中的“特殊道具”，上面的例子是语法糖，(几乎)相当于<Wrapper children={<App/>}/>

初始化包装器/ HOC

您可以使用高阶组件(HOC)。它们最近被添加到官方文档中。

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

这可能会带来(一点点)更好的性能，因为包装器组件可以通过shouldComponentUpdate提前一步短路呈现，而在运行时包装器的情况下，子道具可能总是不同的ReactElement，并导致重新呈现，即使您的组件扩展了PureComponent。

请注意，Redux的connect曾经是一个运行时包装器，但被更改为HOC，因为如果您使用pure选项(默认为true)，它允许避免无用的重新渲染。

你不应该在渲染阶段调用HOC，因为创建React组件的开销很大。您应该在初始化时调用这些包装器。

请注意，当使用上述功能组件时，HOC版本不提供任何有用的优化，因为无状态功能组件不实现shouldComponentUpdate

更多解释请访问:https://stackoverflow.com/a/31564812/82609

2015-08-01 01:44:15

如何在一个反应组件传递到另一个反应组件，以穿透第一个组件的内容?

推荐文章

最新文章

标签